基础表单：登录注册页面需求分析
概述
本节分析管理后台系统登录注册页面的需求，参考大厂设计方案（小红书、火山引擎、百度智慧云等），规划页面功能模块与技术实现方案。
大厂登录页面设计参考
| 产品 | 登录方式 | 设计特点 |
|---|---|---|
| 小红书 | APP 扫码 + 手机号 | 扫码与手机号并排，第三方登录在底部 |
| 火山引擎 | 账号登录 + 手机号 | Tab 切换方式区分两种登录 |
| 百度智慧云 | 账号 + 短信 + 云账号 | 多 Tab 切换，引导使用主推方式 |
| 国外网站 | Email + Social Login | 简洁，Google/GitHub OAuth 为主 |
登录页面功能模块
┌──────────────────────────────────┐
│ 系统名称 / Logo │
├──────────────────────────────────┤
│ [账号登录] [手机号登录] ← Tab │
├──────────────────────────────────┤
│ ┌────────────────────────────┐ │
│ │ 用户名/手机号 [Input] │ │
│ │ 密码 [Input] │ │
│ │ 验证码 [Input] [Image] │ │
│ │ 记住密码 [Checkbox] │ │
│ │ [登录按钮] │ │
│ └────────────────────────────┘ │
├──────────────────────────────────┤
│ 忘记密码 | 注册新账号 │
├──────────────────────────────────┤
│ 其他登录方式：[icon] [icon] ... │
└──────────────────────────────────┘
text
功能清单
| 模块 | 功能 | Element Plus 组件 |
|---|---|---|
| 登录表单 | 用户名 + 密码输入 | ElInput + ElButton |
| 手机号登录 | 手机号 + 验证码 | ElInput + ElButton |
| 表单校验 | 必填、格式、长度 | ElForm rules |
| 记住密码 | 本地缓存 | ElCheckbox |
| 语言切换 | 中/英文 | 下拉选择 |
| 暗黑模式 | 主题切换 | 开关按钮 |
| 第三方登录 | GitHub/Google 等 | Icon + 链接数组 |
| 注册入口 | 跳转注册页 | 路由链接 |
技术实现方案
登录类型枚举
// enums.ts
export enum LoginType {
Account = 'account', // 账号密码登录
Phone = 'phone', // 手机号登录
QRCode = 'qrcode' // 扫码登录
}
export enum RegisterType {
Account = 'account',
Phone = 'phone'
}
typescript
页面组件结构
<template>
<div class="login-page">
<!-- 背景装饰 -->
<div class="login-bg">
<img :src="bgImage" alt="" />
</div>
<!-- 顶部工具栏 -->
<div class="login-header">
<LangSwitch />
<ThemeToggle />
</div>
<!-- 登录卡片 -->
<div class="login-card">
<h2 class="login-title">{{ appName }}</h2>
<!-- 登录方式切换 -->
<el-tabs v-model="loginType">
<el-tab-pane label="账号登录" :name="LoginType.Account">
<AccountLogin @submit="handleLogin" />
</el-tab-pane>
<el-tab-pane label="手机号登录" :name="LoginType.Phone">
<PhoneLogin @submit="handleLogin" />
</el-tab-pane>
</el-tabs>
<!-- 其他操作 -->
<div class="login-footer">
<router-link to="/forgot-password">忘记密码</router-link>
<router-link to="/register">注册新账号</router-link>
</div>
<!-- 第三方登录 -->
<div class="third-party-login">
<p>其他登录方式</p>
<div class="social-icons">
<a
v-for="item in socialLinks"
:key="item.name"
:href="item.url"
:title="item.name"
>
<el-icon :size="24"><component :is="item.icon" /></el-icon>
</a>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { LoginType } from './enums'
import AccountLogin from './AccountLogin.vue'
import PhoneLogin from './PhoneLogin.vue'
const loginType = ref<LoginType>(LoginType.Account)
const socialLinks = [
{ name: 'GitHub', icon: 'Github', url: '/auth/github' },
{ name: 'Google', icon: 'Google', url: '/auth/google' },
{ name: 'WeChat', icon: 'Wechat', url: '/auth/wechat' }
]
async function handleLogin(formData: Record<string, string>) {
// 登录逻辑
console.log('登录数据:', formData)
}
</script>
vue
账号登录表单
<!-- AccountLogin.vue -->
<template>
<el-form
ref="formRef"
:model="formData"
:rules="rules"
label-width="0"
@submit.prevent="onSubmit"
>
<el-form-item prop="username">
<el-input
v-model="formData.username"
placeholder="用户名 / 邮箱"
prefix-icon="User"
size="large"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="formData.password"
type="password"
placeholder="密码"
prefix-icon="Lock"
size="large"
show-password
/>
</el-form-item>
<el-form-item>
<div class="form-actions">
<el-checkbox v-model="rememberMe">记住密码</el-checkbox>
</div>
</el-form-item>
<el-form-item>
<el-button
type="primary"
size="large"
class="login-btn"
:loading="loading"
native-type="submit"
>
登录
</el-button>
</el-form-item>
</el-form>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
const emit = defineEmits<{
submit: [data: { username: string; password: string }]
}>()
const formRef = ref<FormInstance>()
const loading = ref(false)
const rememberMe = ref(false)
const formData = reactive({
username: '',
password: ''
})
const rules: FormRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 32, message: '长度在 3 到 32 个字符', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 32, message: '长度在 6 到 32 个字符', trigger: 'blur' }
]
}
async function onSubmit() {
const valid = await formRef.value?.validate().catch(() => false)
if (!valid) return
loading.value = true
try {
emit('submit', { ...formData })
} finally {
loading.value = false
}
}
</script>
vue
响应式设计要点
/* 移动端适配 */
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
padding: 16px;
}
.login-card {
width: 100%;
max-width: 420px;
padding: 32px;
}
/* 桌面端：左侧背景图 + 右侧表单 */
@media (min-width: 768px) {
.login-page {
flex-direction: row;
}
.login-bg {
flex: 1;
display: block;
}
.login-card {
width: 480px;
}
}
css
小结
- 登录注册页面需要支持多种登录方式（账号、手机号、扫码）
- 参考 大厂 设计可快速确定页面结构和交互方案
- 第三方登录通过配置数组动态渲染，易于扩展
- 页面需要考虑响应式布局、暗黑模式、语言切换等基础功能
↑