wangys/schoolNews
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录注册、手机号、邮箱

Browse Source
This commit is contained in:
wangys
2025-11-03 13:37:55 +08:00
parent 16754b527e
commit 35aee59178
26 changed files with 4292 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
schoolNewsWeb/src/apis/system/auth.ts
View File

@@ -5,7 +5,7 @@
*/
import { api } from '@/apis/index';
import type { LoginParam, LoginDomain, ResultDomain } from '@/types';
import type { LoginParam, RegisterParam, LoginDomain, ResultDomain } from '@/types';
/**
* 认证API服务
@@ -21,6 +21,16 @@ export const authApi = {
return response.data;
},
/**
* 用户注册
* @param registerParam 注册参数
* @returns Promise<ResultDomain<LoginDomain>>
*/
async register(registerParam: RegisterParam): Promise<ResultDomain<LoginDomain>> {
const response = await api.post<LoginDomain>('/auth/register', registerParam);
return response.data;
},
/**
* 用户登出
* @returns Promise<ResultDomain<string>>
@@ -51,20 +61,20 @@ export const authApi = {
/**
* 发送手机验证码
* @param phone 手机号
* @returns Promise<ResultDomain<boolean>>
* @returns Promise<ResultDomain<{sessionId: string, message: string}>>
*/
async sendSmsCode(phone: string): Promise<ResultDomain<boolean>> {
const response = await api.post<boolean>('/auth/send-sms-code', { phone });
async sendSmsCode(phone: string): Promise<ResultDomain<{sessionId: string, message: string}>> {
const response = await api.post<{sessionId: string, message: string}>('/auth/send-sms-code', { phone });
return response.data;
},
/**
* 发送邮箱验证码
* @param email 邮箱
* @returns Promise<ResultDomain<boolean>>
* @returns Promise<ResultDomain<{sessionId: string, message: string}>>
*/
async sendEmailCode(email: string): Promise<ResultDomain<boolean>> {
const response = await api.post<boolean>('/auth/send-email-code', { email });
async sendEmailCode(email: string): Promise<ResultDomain<{sessionId: string, message: string}>> {
const response = await api.post<{sessionId: string, message: string}>('/auth/send-email-code', { email });
return response.data;
}
};

6
schoolNewsWeb/src/components/base/UserDropdown.vue
View File

@@ -23,7 +23,7 @@
<span class="avatar-placeholder" v-else>{{ avatarText }}</span>
</div>
<div class="user-details" v-if="!collapsed">
<div class="user-name">{{ user?.realName || user?.username }}</div>
<div class="user-name">{{ user?.fullName || user?.username }}</div>
<div class="user-role">{{ primaryRole }}</div>
</div>
<i class="dropdown-icon" :class="{ 'open': dropdownVisible }"></i>
@@ -113,13 +113,13 @@ const userAvatar = computed(() => {
});
const avatarText = computed(() => {
const name = props.user?.realName || props.user?.username || '';
const name = props.user?.fullName || props.user?.username || '';
return name.charAt(0).toUpperCase();
});
const primaryRole = computed(() => {
// 这里可以从store中获取用户角色信息
return '管理员'; // 暂时硬编码
return store.getters['auth/userRoles'][0].roleName || '';
});
// 获取用户下拉菜单（个人中心和账号中心）

86
schoolNewsWeb/src/store/modules/auth.ts
View File

@@ -24,13 +24,45 @@ export interface AuthState {
routesLoaded: boolean;
}
// 从localStorage恢复状态的辅助函数
// 存储工具函数
const StorageUtil = {
// 保存数据（根据rememberMe选择存储方式）
setItem(key: string, value: string, rememberMe = false) {
if (rememberMe) {
localStorage.setItem(key, value);
} else {
sessionStorage.setItem(key, value);
}
},
// 获取数据（优先从localStorage，其次sessionStorage）
getItem(key: string): string | null {
return localStorage.getItem(key) || sessionStorage.getItem(key);
},
// 删除数据（从两个存储中都删除）
removeItem(key: string) {
localStorage.removeItem(key);
sessionStorage.removeItem(key);
},
// 清除所有认证相关数据
clearAuth() {
const keys = ['token', 'loginDomain', 'menus', 'permissions', 'rememberMe'];
keys.forEach(key => {
localStorage.removeItem(key);
sessionStorage.removeItem(key);
});
}
};
// 从存储恢复状态的辅助函数
function getStoredState(): Partial<AuthState> {
try {
const token = localStorage.getItem('token');
const loginDomainStr = localStorage.getItem('loginDomain');
const menusStr = localStorage.getItem('menus');
const permissionsStr = localStorage.getItem('permissions');
const token = StorageUtil.getItem('token');
const loginDomainStr = StorageUtil.getItem('loginDomain');
const menusStr = StorageUtil.getItem('menus');
const permissionsStr = StorageUtil.getItem('permissions');
return {
token: token || null,
@@ -40,7 +72,7 @@ function getStoredState(): Partial<AuthState> {
routesLoaded: false, // 路由始终需要重新加载
};
} catch (error) {
console.error('从localStorage恢复状态失败:', error);
console.error('从存储恢复状态失败:', error);
return {
token: null,
loginDomain: null,
@@ -111,50 +143,57 @@ const authModule: Module<AuthState, any> = {
mutations: {
// 设置登录信息
SET_LOGIN_DOMAIN(state, loginDomain: LoginDomain) {
SET_LOGIN_DOMAIN(state, payload: { loginDomain: LoginDomain; rememberMe?: boolean }) {
const { loginDomain, rememberMe = false } = payload;
state.loginDomain = loginDomain;
state.token = loginDomain.token || null;
state.menus = loginDomain.menus || [];
state.permissions = loginDomain.permissions || [];
// 持久化到localStorage
// 持久化到存储（根据rememberMe选择localStorage或sessionStorage）
if (state.token) {
localStorage.setItem('token', state.token);
StorageUtil.setItem('token', state.token, rememberMe);
}
if (loginDomain) {
localStorage.setItem('loginDomain', JSON.stringify(loginDomain));
StorageUtil.setItem('loginDomain', JSON.stringify(loginDomain), rememberMe);
}
if (state.menus.length > 0) {
localStorage.setItem('menus', JSON.stringify(state.menus));
StorageUtil.setItem('menus', JSON.stringify(state.menus), rememberMe);
}
if (state.permissions.length > 0) {
localStorage.setItem('permissions', JSON.stringify(state.permissions));
StorageUtil.setItem('permissions', JSON.stringify(state.permissions), rememberMe);
}
// 保存rememberMe标记
StorageUtil.setItem('rememberMe', String(rememberMe), rememberMe);
},
// 设置Token
SET_TOKEN(state, token: string | null) {
state.token = token;
const rememberMe = StorageUtil.getItem('rememberMe') === 'true';
if (token) {
localStorage.setItem('token', token);
StorageUtil.setItem('token', token, rememberMe);
} else {
localStorage.removeItem('token');
StorageUtil.removeItem('token');
}
},
// 设置菜单
SET_MENUS(state, menus: SysMenu[]) {
state.menus = menus;
const rememberMe = StorageUtil.getItem('rememberMe') === 'true';
if (menus.length > 0) {
localStorage.setItem('menus', JSON.stringify(menus));
StorageUtil.setItem('menus', JSON.stringify(menus), rememberMe);
}
},
// 设置权限
SET_PERMISSIONS(state, permissions: SysPermission[]) {
state.permissions = permissions;
const rememberMe = StorageUtil.getItem('rememberMe') === 'true';
if (permissions.length > 0) {
localStorage.setItem('permissions', JSON.stringify(permissions));
StorageUtil.setItem('permissions', JSON.stringify(permissions), rememberMe);
}
},
@@ -171,11 +210,8 @@ const authModule: Module<AuthState, any> = {
state.permissions = [];
state.routesLoaded = false;
// 清除localStorage
localStorage.removeItem('token');
localStorage.removeItem('loginDomain');
localStorage.removeItem('menus');
localStorage.removeItem('permissions');
// 清除所有认证相关存储（localStorage和sessionStorage）
StorageUtil.clearAuth();
}
},
@@ -188,8 +224,12 @@ const authModule: Module<AuthState, any> = {
return Promise.reject(result.message);
}
const loginDomain = result.data;
// 保存登录信息
commit('SET_LOGIN_DOMAIN', loginDomain);
// 保存登录信息（传递rememberMe参数）
commit('SET_LOGIN_DOMAIN', {
loginDomain,
rememberMe: loginParam.rememberMe || false
});
// 生成动态路由
await dispatch('generateRoutes');

50
schoolNewsWeb/src/types/auth/index.ts
View File

@@ -5,7 +5,7 @@
*/
import { SysUser, SysUserInfo } from '../user';
import { DeptRoleVO } from '../dept';
import { UserDeptRoleVO } from '../dept';
import { SysPermission } from '../permission';
import { SysMenu } from '../menu';
import { LoginType } from '../enums';
@@ -32,6 +32,52 @@ export interface LoginParam {
captchaId?: string;
/** 记住我 */
rememberMe?: boolean;
/** 同意用户协议 */
agree?: boolean;
}
/**
* 注册方式枚举
*/
export enum RegisterType {
/** 用户名注册 */
USERNAME = 'username',
/** 手机号注册 */
PHONE = 'phone',
/** 邮箱注册 */
EMAIL = 'email'
}
/**
* 注册参数
*/
export interface RegisterParam {
/** 注册方式 */
registerType: RegisterType;
/** 用户名 */
username?: string;
/** 真实姓名 */
realName?: string;
/** 手机号 */
phone?: string;
/** 邮箱 */
email?: string;
/** 密码 */
password: string;
/** 确认密码 */
confirmPassword: string;
/** 学号 */
studentId?: string;
/** 手机验证码 */
smsCode?: string;
/** 邮箱验证码 */
emailCode?: string;
/** 短信会话ID */
smsSessionId?: string;
/** 邮箱会话ID */
emailSessionId?: string;
/** 同意用户协议 */
agree: boolean;
}
/**
@@ -43,7 +89,7 @@ export interface LoginDomain {
/** 用户详细信息 */
userInfo?: SysUserInfo;
/** 用户角色列表 */
roles?: DeptRoleVO[];
roles?: UserDeptRoleVO[];
/** 用户权限列表 */
permissions?: SysPermission[];
/** 用户菜单列表 */

4
schoolNewsWeb/src/views/admin/manage/system/UserManageView.vue
View File

@@ -109,10 +109,10 @@
<el-input v-model="currentUser.phone" placeholder="请输入手机号" />
</el-form-item>
<el-form-item label="真实姓名" prop="realName">
<el-input v-model="currentUser.realName" placeholder="请输入真实姓名" />
<el-input v-model="currentUser.fullName" placeholder="请输入真实姓名" />
</el-form-item>
<el-form-item label="昵称" prop="nickname">
<el-input v-model="currentUser.nickname" placeholder="请输入昵称" />
<el-input v-model="currentUser.username" placeholder="请输入昵称" />
</el-form-item>
<el-form-item label="状态" prop="status">
<el-radio-group v-model="currentUser.status">

432
schoolNewsWeb/src/views/public/login/Login.vue
View File

@@ -24,7 +24,23 @@
</div>
<h1 class="platform-title">红色思政学习平台</h1>
</div>
<h2 class="login-title">账号登录</h2>
<h2 class="login-title">{{ loginModeTitle }}</h2>
</div>
<!-- 登录方式切换 -->
<div class="login-mode-tabs">
<div
:class="['tab-item', { active: loginMode === 'password' }]"
@click="switchLoginMode('password')"
>
密码登录
</div>
<div
:class="['tab-item', { active: loginMode === 'captcha' }]"
@click="switchLoginMode('captcha')"
>
验证码登录
</div>
</div>
<!-- 登录表单 -->
@@ -35,23 +51,104 @@
class="login-form"
@submit.prevent="handleLogin"
>
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入学号、手机号"
class="form-input"
/>
</el-form-item>
<!-- 密码登录模式 -->
<template v-if="loginMode === 'password'">
<el-form-item prop="username">
<el-input
v-model="loginForm.username"
placeholder="请输入学号、手机号、邮箱"
class="form-input"
/>
</el-form-item>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
show-password
class="form-input"
/>
</el-form-item>
</template>
<el-form-item prop="password">
<el-input
v-model="loginForm.password"
type="password"
placeholder="请输入密码"
show-password
class="form-input"
/>
</el-form-item>
<!-- 验证码登录模式 -->
<template v-else>
<!-- 登录方式选择 -->
<div class="captcha-type-tabs">
<div
:class="['captcha-tab-item', { active: captchaType === 'phone' }]"
@click="switchCaptchaType('phone')"
>
手机号
</div>
<div
:class="['captcha-tab-item', { active: captchaType === 'email' }]"
@click="switchCaptchaType('email')"
>
邮箱
</div>
</div>
<!-- 手机号验证码登录 -->
<template v-if="captchaType === 'phone'">
<el-form-item prop="phone">
<el-input
v-model="loginForm.phone"
placeholder="请输入手机号"
class="form-input"
maxlength="11"
/>
</el-form-item>
<el-form-item prop="captcha">
<div class="captcha-input-container">
<el-input
v-model="loginForm.captcha"
placeholder="请输入验证码"
class="form-input captcha-input"
maxlength="6"
/>
<el-button
class="send-captcha-btn"
:disabled="smsCountdown > 0"
@click="handleSendSmsCode"
>
{{ smsCountdown > 0 ? `${smsCountdown}秒后重试` : '获取验证码' }}
</el-button>
</div>
</el-form-item>
</template>
<!-- 邮箱验证码登录 -->
<template v-else>
<el-form-item prop="email">
<el-input
v-model="loginForm.email"
placeholder="请输入邮箱"
class="form-input"
/>
</el-form-item>
<el-form-item prop="captcha">
<div class="captcha-input-container">
<el-input
v-model="loginForm.captcha"
placeholder="请输入验证码"
class="form-input captcha-input"
maxlength="6"
/>
<el-button
class="send-captcha-btn"
:disabled="emailCountdown > 0"
@click="handleSendEmailCode"
>
{{ emailCountdown > 0 ? `${emailCountdown}秒后重试` : '获取验证码' }}
</el-button>
</div>
</el-form-item>
</template>
</template>
<el-form-item>
<div class="login-options">
@@ -75,8 +172,11 @@
>
登录
</el-button>
</el-form-item>
<el-form-item prop="agree">
<p class="agreement-text">
<el-checkbox v-model="loginForm.rememberMe">登录即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
<el-checkbox v-model="loginForm.agree">登录即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
</p>
</el-form-item>
</el-form>
@@ -96,11 +196,12 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ref, reactive, onMounted, computed } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import type { LoginParam } from '@/types';
import { LoginType } from '@/types/enums';
import { authApi } from '@/apis/system/auth';
// 响应式引用
@@ -109,6 +210,15 @@ const loginLoading = ref(false);
const showCaptcha = ref(false);
const captchaImage = ref('');
// 登录模式：password-密码登录，captcha-验证码登录
const loginMode = ref<'password' | 'captcha'>('password');
// 验证码类型：phone-手机号，email-邮箱
const captchaType = ref<'phone' | 'email'>('phone');
// 倒计时
const smsCountdown = ref(0);
const emailCountdown = ref(0);
// Composition API
const router = useRouter();
const route = useRoute();
@@ -116,39 +226,222 @@ const store = useStore();
// 表单数据
const loginForm = reactive<LoginParam>({
loginType: undefined,
username: '',
phone: '',
email: '',
password: '',
captcha: '',
captchaId: '',
rememberMe: false
rememberMe: false,
agree: false
});
// 计算属性：登录模式标题
const loginModeTitle = computed(() => {
return loginMode.value === 'password' ? '密码登录' : '验证码登录';
});
// 表单验证规则
const loginRules: FormRules = {
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 20, message: '用户名长度为3-20个字符', trigger: 'blur' }
{
required: loginMode.value === 'password',
message: '请输入用户名、手机号或邮箱',
trigger: 'blur'
}
],
phone: [
{
required: loginMode.value === 'captcha' && captchaType.value === 'phone',
message: '请输入手机号',
trigger: 'blur'
},
{
pattern: /^1[3-9]\d{9}$/,
message: '请输入正确的手机号',
trigger: 'blur'
}
],
email: [
{
required: loginMode.value === 'captcha' && captchaType.value === 'email',
message: '请输入邮箱',
trigger: 'blur'
},
{
type: 'email',
message: '请输入正确的邮箱格式',
trigger: 'blur'
}
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, message: '密码至少6个字符', trigger: 'blur' }
{
required: loginMode.value === 'password',
message: '请输入密码',
trigger: 'blur'
},
{
min: 6,
message: '密码至少6个字符',
trigger: 'blur'
}
],
captcha: [
{ required: true, message: '请输入验证码', trigger: 'blur' },
{ len: 4, message: '验证码为4位', trigger: 'blur' }
{
required: loginMode.value === 'captcha',
message: '请输入验证码',
trigger: 'blur'
},
{
len: 6,
message: '验证码为6位',
trigger: 'blur'
}
],
agree: [
{
validator: (rule: any, value: boolean, callback: any) => {
if (!value) {
callback(new Error('请同意《红色思政智能体平台》用户协议'));
} else {
callback();
}
},
trigger: 'change'
}
]
};
// 切换登录模式
const switchLoginMode = (mode: 'password' | 'captcha') => {
if (loginMode.value === mode) return;
loginMode.value = mode;
// 清空表单数据和验证
loginFormRef.value?.clearValidate();
loginForm.username = '';
loginForm.phone = '';
loginForm.email = '';
loginForm.password = '';
loginForm.captcha = '';
loginForm.captchaId = '';
};
// 切换验证码类型
const switchCaptchaType = (type: 'phone' | 'email') => {
if (captchaType.value === type) return;
captchaType.value = type;
// 清空相关表单数据和验证
loginFormRef.value?.clearValidate();
loginForm.phone = '';
loginForm.email = '';
loginForm.captcha = '';
loginForm.captchaId = '';
};
// 发送短信验证码
const handleSendSmsCode = async () => {
// 验证手机号
if (!loginForm.phone || loginForm.phone.trim() === '') {
ElMessage.warning('请输入手机号');
return;
}
const phonePattern = /^1[3-9]\d{9}$/;
if (!phonePattern.test(loginForm.phone)) {
ElMessage.warning('请输入正确的手机号');
return;
}
try {
const result = await authApi.sendSmsCode(loginForm.phone);
if (result.code === 200 && result.data) {
// 保存sessionId
loginForm.captchaId = result.data.sessionId;
ElMessage.success(result.data.message || '验证码已发送');
// 开始倒计时
smsCountdown.value = 60;
const timer = setInterval(() => {
smsCountdown.value--;
if (smsCountdown.value <= 0) {
clearInterval(timer);
}
}, 1000);
} else {
ElMessage.error(result.message || '发送验证码失败');
}
} catch (error: any) {
console.error('发送验证码失败:', error);
ElMessage.error(error.message || '发送验证码失败');
}
};
// 发送邮箱验证码
const handleSendEmailCode = async () => {
// 验证邮箱
if (!loginForm.email || loginForm.email.trim() === '') {
ElMessage.warning('请输入邮箱');
return;
}
const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
if (!emailPattern.test(loginForm.email)) {
ElMessage.warning('请输入正确的邮箱格式');
return;
}
try {
const result = await authApi.sendEmailCode(loginForm.email);
if (result.code === 200 && result.data) {
// 保存sessionId
loginForm.captchaId = result.data.sessionId;
ElMessage.success(result.data.message || '验证码已发送到邮箱');
// 开始倒计时
emailCountdown.value = 60;
const timer = setInterval(() => {
emailCountdown.value--;
if (emailCountdown.value <= 0) {
clearInterval(timer);
}
}, 1000);
} else {
ElMessage.error(result.message || '发送验证码失败');
}
} catch (error: any) {
console.error('发送验证码失败:', error);
ElMessage.error(error.message || '发送验证码失败');
}
};
// 方法
const handleLogin = async () => {
if (!loginFormRef.value) return;
// 检查是否同意用户协议
if (!loginForm.agree) {
ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
return;
}
try {
const valid = await loginFormRef.value.validate();
if (!valid) return;
loginLoading.value = true;
// 根据登录模式设置loginType
if (loginMode.value === 'password') {
loginForm.loginType = LoginType.PASSWORD;
} else {
loginForm.loginType = captchaType.value === 'phone' ? LoginType.PHONE : LoginType.EMAIL;
}
// 调用store中的登录action
const result = await store.dispatch('auth/login', loginForm);
@@ -164,7 +457,7 @@ const handleLogin = async () => {
// 登录失败后显示验证码
showCaptcha.value = true;
refreshCaptcha();
// refreshCaptcha();
} finally {
loginLoading.value = false;
}
@@ -322,6 +615,60 @@ onMounted(() => {
}
}
.login-mode-tabs {
display: flex;
gap: 16px;
margin-bottom: 24px;
border-bottom: 1px solid #E8E8E8;
.tab-item {
padding: 8px 16px;
font-size: 14px;
color: rgba(0, 0, 0, 0.45);
cursor: pointer;
border-bottom: 2px solid transparent;
transition: all 0.3s;
&:hover {
color: #C62828;
}
&.active {
color: #C62828;
border-bottom-color: #C62828;
font-weight: 600;
}
}
}
.captcha-type-tabs {
display: flex;
gap: 12px;
margin-bottom: 16px;
.captcha-tab-item {
flex: 1;
padding: 8px;
text-align: center;
font-size: 14px;
color: rgba(0, 0, 0, 0.65);
background: #F2F3F5;
border-radius: 8px;
cursor: pointer;
transition: all 0.3s;
&:hover {
background: #E8E8E8;
}
&.active {
color: #FFFFFF;
background: #C62828;
font-weight: 500;
}
}
}
.login-form {
.form-input {
width: 100%;
@@ -343,6 +690,37 @@ onMounted(() => {
}
}
.captcha-input-container {
display: flex;
gap: 8px;
width: 100%;
.captcha-input {
flex: 1;
}
.send-captcha-btn {
height: 48px;
padding: 0 16px;
background: #C62828;
border: none;
border-radius: 12px;
color: #FFFFFF;
font-size: 13px;
white-space: nowrap;
&:hover:not(:disabled) {
background: #B71C1C;
}
&:disabled {
background: #D9D9D9;
color: rgba(0, 0, 0, 0.25);
cursor: not-allowed;
}
}
}
.login-options {
display: flex;
justify-content: space-between;

811
schoolNewsWeb/src/views/public/login/Register.vue
View File

@@ -1,25 +1,187 @@
<template>
<div class="register-container">
<div class="register-box">
<div class="register-header">
<div class="logo">
<img src="@/assets/logo.png" alt="Logo" />
</div>
<h1 class="title">注册账户</h1>
<p class="subtitle">创建您的校园新闻管理系统账户</p>
</div>
<div class="register-form">
<!-- 注册表单内容 -->
<div class="form-placeholder">
<p>注册功能开发中...</p>
<!-- 左侧励志区域 -->
<div class="register-left">
<div class="left-content">
<div class="quote-text">
<span class="quote-mark">“</span>
<div class="quote-content">
<p>不负时代韶华，</p>
<p>争做时代新人。</p>
</div>
</div>
</div>
</div>
<!-- 右侧注册表单区域 -->
<div class="register-right">
<div class="register-form-container">
<!-- Logo和标题区域 -->
<div class="register-header">
<div class="logo-section">
<div class="logo">
<img src="@/assets/imgs/logo-icon.svg" alt="Logo" />
</div>
<h1 class="platform-title">红色思政学习平台</h1>
</div>
<h2 class="register-title">{{ registerTypeTitle }}</h2>
<!-- 注册方式切换 -->
<div class="register-type-tabs">
<div
class="tab-item"
:class="{ active: registerType === RegisterType.USERNAME }"
@click="switchRegisterType(RegisterType.USERNAME)"
>
用户名
</div>
<div
class="tab-item"
:class="{ active: registerType === RegisterType.PHONE }"
@click="switchRegisterType(RegisterType.PHONE)"
>
手机号
</div>
<div
class="tab-item"
:class="{ active: registerType === RegisterType.EMAIL }"
@click="switchRegisterType(RegisterType.EMAIL)"
>
邮箱
</div>
</div>
</div>
<!-- 注册表单 -->
<el-form
ref="registerFormRef"
:model="registerForm"
:rules="registerRules"
class="register-form"
@submit.prevent="handleRegister"
>
<!-- 用户名注册 -->
<template v-if="registerType === RegisterType.USERNAME">
<el-form-item prop="username">
<el-input
v-model="registerForm.username"
placeholder="请输入用户名"
class="form-input"
/>
</el-form-item>
</template>
<!-- 手机号注册 -->
<template v-if="registerType === RegisterType.PHONE">
<el-form-item prop="phone">
<el-input
v-model="registerForm.phone"
placeholder="请输入手机号"
class="form-input"
/>
</el-form-item>
<el-form-item prop="smsCode">
<div class="phone-input-wrapper">
<el-input
v-model="registerForm.smsCode"
placeholder="请输入手机验证码"
class="form-input phone-input"
/>
<el-button
:disabled="smsCountdown > 0"
@click="handleSendSmsCode"
class="code-button"
>
{{ smsCountdown > 0 ? `${smsCountdown}s` : '获取验证码' }}
</el-button>
</div>
</el-form-item>
</template>
<!-- 邮箱注册 -->
<template v-if="registerType === RegisterType.EMAIL">
<el-form-item prop="email">
<el-input
v-model="registerForm.email"
placeholder="请输入邮箱"
class="form-input"
/>
</el-form-item>
<el-form-item prop="emailCode">
<div class="phone-input-wrapper">
<el-input
v-model="registerForm.emailCode"
placeholder="请输入邮箱验证码"
class="form-input phone-input"
/>
<el-button
:disabled="emailCountdown > 0"
@click="handleSendEmailCode"
class="code-button"
>
{{ emailCountdown > 0 ? `${emailCountdown}s` : '获取验证码' }}
</el-button>
</div>
</el-form-item>
</template>
<!-- 通用字段 -->
<!-- <el-form-item prop="studentId">
<el-input
v-model="registerForm.studentId"
placeholder="请输入学号"
class="form-input"
/>
</el-form-item> -->
<el-form-item prop="password">
<el-input
v-model="registerForm.password"
type="password"
placeholder="请输入密码（至少6个字符）"
show-password
class="form-input"
/>
</el-form-item>
<el-form-item prop="confirmPassword">
<el-input
v-model="registerForm.confirmPassword"
type="password"
placeholder="请再次输入密码"
show-password
class="form-input"
/>
</el-form-item>
<el-form-item>
<el-button
type="primary"
:loading="registerLoading"
@click="handleRegister"
class="register-button"
>
注册
</el-button>
</el-form-item>
<el-form-item prop="agree">
<p class="agreement-text">
<el-checkbox v-model="registerForm.agree">注册即为同意<span class="agreement-link" style="color: red">《红色思政智能体平台》</span></el-checkbox>
</p>
</el-form-item>
</el-form>
</div>
<!-- 底部信息 -->
<div class="register-footer">
<p>
已有账户？
<el-link type="primary" @click="goToLogin">立即登录</el-link>
<p class="login-link">
已有账号？<span class="login-link-text" @click="goToLogin">立即登录</span>
</p>
<p class="copyright">
Copyright ©红色思政智能体平台
</p>
</div>
</div>
@@ -27,75 +189,622 @@
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElMessage, type FormInstance, type FormRules } from 'element-plus';
import type { RegisterParam } from '@/types';
import { RegisterType } from '@/types';
import { authApi } from '@/apis/system/auth';
// 响应式引用
const registerFormRef = ref<FormInstance>();
const registerLoading = ref(false);
const smsCountdown = ref(0);
const emailCountdown = ref(0);
let smsTimer: number | null = null;
let emailTimer: number | null = null;
// Composition API
const router = useRouter();
// 注册方式
const registerType = ref<RegisterType>(RegisterType.USERNAME);
// 表单数据
const registerForm = reactive<RegisterParam>({
registerType: RegisterType.USERNAME,
username: '',
studentId: '',
phone: '',
email: '',
password: '',
confirmPassword: '',
smsCode: '',
emailCode: '',
smsSessionId: '',
emailSessionId: '',
agree: false
});
// 根据注册方式显示不同的标题
const registerTypeTitle = computed(() => {
switch (registerType.value) {
case RegisterType.USERNAME:
return '用户名注册';
case RegisterType.PHONE:
return '手机号注册';
case RegisterType.EMAIL:
return '邮箱注册';
default:
return '账号注册';
}
});
// 切换注册方式
const switchRegisterType = (type: RegisterType) => {
registerType.value = type;
registerForm.registerType = type;
// 清空表单验证
registerFormRef.value?.clearValidate();
};
// 自定义验证器
const validatePass = (rule: any, value: string, callback: any) => {
if (value === '') {
callback(new Error('请输入密码'));
} else if (value.length < 6) {
callback(new Error('密码至少6个字符'));
} else {
if (registerForm.confirmPassword !== '') {
registerFormRef.value?.validateField('confirmPassword');
}
callback();
}
};
const validateConfirmPass = (rule: any, value: string, callback: any) => {
if (value === '') {
callback(new Error('请再次输入密码'));
} else if (value !== registerForm.password) {
callback(new Error('两次输入的密码不一致'));
} else {
callback();
}
};
const validatePhone = (rule: any, value: string, callback: any) => {
if (registerType.value === RegisterType.PHONE) {
if (value === '') {
callback(new Error('请输入手机号'));
} else if (!/^1[3-9]\d{9}$/.test(value)) {
callback(new Error('请输入有效的手机号'));
} else {
callback();
}
} else {
callback();
}
};
const validateEmail = (rule: any, value: string, callback: any) => {
if (registerType.value === RegisterType.EMAIL) {
if (value === '') {
callback(new Error('请输入邮箱'));
} else if (!/^[A-Za-z0-9+_.-]+@[A-Za-z0-9.-]+\.[A-Za-z]{2,}$/.test(value)) {
callback(new Error('请输入有效的邮箱地址'));
} else {
callback();
}
} else {
callback();
}
};
const validateUsername = (rule: any, value: string, callback: any) => {
if (registerType.value === RegisterType.USERNAME) {
if (value === '') {
callback(new Error('请输入用户名'));
} else if (value.length < 3 || value.length > 20) {
callback(new Error('用户名长度为3-20个字符'));
} else if (!/^[a-zA-Z0-9_]+$/.test(value)) {
callback(new Error('用户名只能包含字母、数字和下划线'));
} else {
callback();
}
} else {
callback();
}
};
// 表单验证规则
const registerRules: FormRules = {
username: [
{ validator: validateUsername, trigger: 'blur' }
],
studentId: [
{ required: true, message: '请输入学号', trigger: 'blur' },
{ min: 5, max: 20, message: '学号长度为5-20个字符', trigger: 'blur' }
],
phone: [
{ validator: validatePhone, trigger: 'blur' }
],
email: [
{ validator: validateEmail, trigger: 'blur' }
],
smsCode: [
{
validator: (rule: any, value: string, callback: any) => {
if (registerType.value === RegisterType.PHONE) {
if (value === '') {
callback(new Error('请输入手机验证码'));
} else if (value.length !== 6) {
callback(new Error('验证码为6位'));
} else {
callback();
}
} else {
callback();
}
},
trigger: 'blur'
}
],
emailCode: [
{
validator: (rule: any, value: string, callback: any) => {
if (registerType.value === RegisterType.EMAIL) {
if (value === '') {
callback(new Error('请输入邮箱验证码'));
} else if (value.length !== 6) {
callback(new Error('验证码为6位'));
} else {
callback();
}
} else {
callback();
}
},
trigger: 'blur'
}
],
password: [
{ required: true, validator: validatePass, trigger: 'blur' }
],
confirmPassword: [
{ required: true, validator: validateConfirmPass, trigger: 'blur' }
],
agree: [
{
validator: (rule: any, value: boolean, callback: any) => {
if (!value) {
callback(new Error('请同意《红色思政智能体平台》用户协议'));
} else {
callback();
}
},
trigger: 'change'
}
]
};
// 发送手机验证码
const handleSendSmsCode = async () => {
// 先验证手机号
try {
await registerFormRef.value?.validateField('phone');
} catch (error) {
return;
}
try {
const result = await authApi.sendSmsCode(registerForm.phone!);
if (result.code === 200 && result.data) {
// 保存sessionId
registerForm.smsSessionId = result.data.sessionId;
ElMessage.success(result.data.message || '验证码已发送');
// 开始倒计时
smsCountdown.value = 60;
smsTimer = window.setInterval(() => {
smsCountdown.value--;
if (smsCountdown.value <= 0 && smsTimer) {
clearInterval(smsTimer);
smsTimer = null;
}
}, 1000);
} else {
ElMessage.error(result.message || '发送验证码失败');
}
} catch (error: any) {
console.error('发送验证码失败:', error);
ElMessage.error(error.message || '发送验证码失败');
}
};
// 发送邮箱验证码
const handleSendEmailCode = async () => {
// 先验证邮箱
try {
await registerFormRef.value?.validateField('email');
} catch (error) {
return;
}
try {
const result = await authApi.sendEmailCode(registerForm.email!);
if (result.code === 200 && result.data) {
// 保存sessionId
registerForm.emailSessionId = result.data.sessionId;
ElMessage.success(result.data.message || '验证码已发送到邮箱');
// 开始倒计时
emailCountdown.value = 60;
emailTimer = window.setInterval(() => {
emailCountdown.value--;
if (emailCountdown.value <= 0 && emailTimer) {
clearInterval(emailTimer);
emailTimer = null;
}
}, 1000);
} else {
ElMessage.error(result.message || '发送验证码失败');
}
} catch (error: any) {
console.error('发送验证码失败:', error);
ElMessage.error(error.message || '发送验证码失败');
}
};
// 注册处理
const handleRegister = async () => {
if (!registerFormRef.value) return;
// 检查是否同意用户协议
if (!registerForm.agree) {
ElMessage.warning('请先同意《红色思政智能体平台》用户协议');
return;
}
try {
const valid = await registerFormRef.value.validate();
if (!valid) return;
registerLoading.value = true;
// 调用注册API
const result = await authApi.register(registerForm);
if (result.code === 200) {
ElMessage.success('注册成功！请登录');
// 注册成功后跳转到登录页
setTimeout(() => {
router.push('/login');
}, 1500);
} else {
ElMessage.error(result.message || '注册失败，请重试');
}
} catch (error: any) {
console.error('注册失败:', error);
ElMessage.error(error.message || '注册失败，请重试');
} finally {
registerLoading.value = false;
}
};
function goToLogin() {
router.push('/login');
}
// 组件卸载时清除定时器
import { onUnmounted } from 'vue';
onUnmounted(() => {
if (smsTimer) {
clearInterval(smsTimer);
}
if (emailTimer) {
clearInterval(emailTimer);
}
});
</script>
<style lang="scss" scoped>
.register-container {
min-height: 100vh;
display: flex;
align-items: center;
width: 100%;
height: 80%;
max-width: 1142px;
margin: auto auto;
box-shadow: 0px 4px 30px 0px rgba(176, 196, 225, 0.25);
border-radius: 30px;
overflow: hidden;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
padding: 20px;
align-items: center;
}
.register-box {
width: 100%;
max-width: 400px;
background: white;
border-radius: 12px;
padding: 40px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
.register-left {
height: 100%;
flex: 1;
display: flex;
padding: 113px 120px;
border-radius: 30px 0 0 30px;
overflow: hidden;
background: url(/schoolNewsWeb/src/assets/imgs/login-bg.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
.left-content {
width: 100%;
max-width: 350px;
}
.quote-text {
color: #FFF2D3;
.quote-mark {
font-family: 'Arial Black', sans-serif;
font-weight: 900;
font-size: 71.096px;
line-height: 0.74;
display: block;
margin-left: 1.48px;
}
.quote-content {
margin-top: 46.66px;
p {
font-family: 'Taipei Sans TC Beta', 'PingFang SC', sans-serif;
font-weight: 700;
font-size: 50px;
line-height: 1.42;
margin: 0;
}
}
}
}
.register-right {
flex: 1;
background: #FFFFFF;
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
border-radius: 0 30px 30px 0;
padding: 40px 0;
}
.register-form-container {
width: 287px;
padding: 0;
flex: 1;
display: flex;
flex-direction: column;
justify-content: center;
}
.register-header {
text-align: center;
margin-bottom: 32px;
margin-bottom: 24px;
.logo img {
width: 64px;
height: 64px;
.logo-section {
display: flex;
align-items: center;
gap: 11px;
margin-bottom: 16px;
.logo {
width: 36px;
height: 36px;
background: #C62828;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
padding: 3px;
img {
width: 30px;
height: 30px;
}
}
.platform-title {
font-family: 'Taipei Sans TC Beta', sans-serif;
font-weight: 700;
font-size: 26px;
line-height: 1.31;
color: #141F38;
margin: 0;
}
}
.title {
font-size: 24px;
.register-title {
font-family: 'PingFang SC', sans-serif;
font-weight: 600;
color: #333;
margin: 0 0 8px 0;
font-size: 16px;
line-height: 1.5;
color: #141F38;
margin: 0 0 16px 0;
}
.subtitle {
color: #666;
font-size: 14px;
margin: 0;
.register-type-tabs {
display: flex;
gap: 8px;
.tab-item {
flex: 1;
padding: 8px 12px;
text-align: center;
background: #F2F3F5;
border-radius: 8px;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
cursor: pointer;
transition: all 0.3s;
&:hover {
background: #E8E9EB;
}
&.active {
background: #C62828;
color: #FFFFFF;
font-weight: 600;
}
}
}
}
.register-form {
.form-placeholder {
text-align: center;
padding: 60px 20px;
color: #999;
.form-input {
width: 100%;
height: 48px;
background: #F2F3F5;
border: none;
border-radius: 12px;
font-size: 14px;
color: rgba(0, 0, 0, 0.3);
&::placeholder {
color: rgba(0, 0, 0, 0.3);
}
&:focus {
outline: none;
background: #FFFFFF;
border: 1px solid #C62828;
}
}
.phone-input-wrapper {
display: flex;
gap: 8px;
width: 100%;
.phone-input {
flex: 1;
}
.code-button {
height: 48px;
padding: 0 16px;
background: #C62828;
border: none;
border-radius: 12px;
color: #FFFFFF;
font-size: 12px;
white-space: nowrap;
&:hover:not(:disabled) {
background: #B71C1C;
}
&:disabled {
background: #D9D9D9;
color: rgba(0, 0, 0, 0.3);
cursor: not-allowed;
}
}
}
.register-button {
width: 100%;
height: 46px;
background: #C62828;
border: none;
border-radius: 12px;
color: #FFFFFF;
font-family: 'PingFang SC', sans-serif;
font-weight: 500;
font-size: 16px;
line-height: 1.4;
margin-bottom: 8px;
&:hover {
background: #B71C1C;
}
}
.agreement-text {
font-family: 'PingFang SC', sans-serif;
font-weight: 400;
font-size: 10px;
line-height: 1.8;
color: rgba(0, 0, 0, 0.3);
text-align: center;
margin: 0;
}
}
.register-footer {
text-align: center;
margin-top: 24px;
width: 100%;
p {
color: #666;
font-size: 14px;
margin: 0;
.login-link {
font-family: 'PingFang SC', sans-serif;
font-weight: 600;
font-size: 12px;
line-height: 1.83;
color: #141F38;
text-align: center;
margin: 0 0 16px 0;
.login-link-text {
cursor: pointer;
color: #ff0000;
&:hover {
color: #C62828;
}
}
}
.copyright {
font-family: 'PingFang SC', sans-serif;
font-size: 12px;
line-height: 2;
color: #D9D9D9;
text-align: center;
padding-bottom: 0;
}
}
// 响应式设计
@media (max-width: 768px) {
.register-container {
flex-direction: column;
border-radius: 0;
min-height: 100vh;
}
.register-left {
min-height: 300px;
padding: 40px;
.left-content {
max-width: 100%;
}
.quote-text {
.quote-mark {
font-size: 50px;
}
.quote-content p {
font-size: 36px;
}
}
}
.register-right {
min-height: auto;
padding: 20px;
}
.register-form-container {
width: 100%;
max-width: 400px;
}
}
</style>