You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
763 lines
16 KiB
763 lines
16 KiB
<template>
|
|
<div class="register-container">
|
|
<!-- 左上角Logo和标题 -->
|
|
<div class="logo-header">
|
|
<img src="@/assets/logo.png" alt="Logo" class="logo">
|
|
<h1 class="register-title">面向疾病预测的知识图谱应用系统</h1>
|
|
</div>
|
|
|
|
<!-- 左侧注册区域 -->
|
|
<div class="register-form-container">
|
|
<div class="register-header">
|
|
</div>
|
|
|
|
<div class="register-form">
|
|
<h2 class="form-title">注册</h2>
|
|
<p class="form-description">创建您的账户以访问系统功能。</p>
|
|
|
|
<form class="form" @submit.prevent="handleRegister">
|
|
<!-- 错误信息显示 -->
|
|
<div v-if="errorMessage" class="error-message">
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<!-- 头像上传区域 -->
|
|
<div class="avatar-upload-container">
|
|
<div class="avatar-container">
|
|
<img
|
|
:src="avatarPreview"
|
|
alt="用户头像"
|
|
class="avatar-image"
|
|
@error="handleAvatarError"
|
|
>
|
|
<div class="avatar-overlay" @click="triggerFileInput">
|
|
<span class="camera-icon">📷</span>
|
|
<span class="overlay-text">上传头像</span>
|
|
</div>
|
|
<input
|
|
type="file"
|
|
ref="fileInput"
|
|
@change="handleAvatarChange"
|
|
accept="image/*"
|
|
class="hidden-input"
|
|
>
|
|
</div>
|
|
<div class="avatar-status">
|
|
<p v-if="avatarUploading" class="uploading-text">上传中...</p>
|
|
<p v-if="avatarUploadError" class="error-text">{{ avatarUploadError }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="username" class="form-label">用户名</label>
|
|
<input
|
|
type="text"
|
|
id="username"
|
|
v-model="registerForm.username"
|
|
placeholder="输入您的用户名"
|
|
class="form-input"
|
|
:class="{ 'error': errors.username }"
|
|
>
|
|
<p v-if="errors.username" class="error-text">{{ errors.username }}</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="password" class="form-label">密码</label>
|
|
<input
|
|
type="password"
|
|
id="password"
|
|
v-model="registerForm.password"
|
|
placeholder="输入您的密码"
|
|
class="form-input"
|
|
:class="{ 'error': errors.password }"
|
|
>
|
|
<p v-if="errors.password" class="error-text">{{ errors.password }}</p>
|
|
</div>
|
|
|
|
<div class="form-group">
|
|
<label for="confirmPassword" class="form-label">确认密码</label>
|
|
<input
|
|
type="password"
|
|
id="confirmPassword"
|
|
v-model="registerForm.confirmPassword"
|
|
placeholder="再次输入您的密码"
|
|
class="form-input"
|
|
:class="{ 'error': errors.confirmPassword }"
|
|
>
|
|
<p v-if="errors.confirmPassword" class="error-text">{{ errors.confirmPassword }}</p>
|
|
</div>
|
|
|
|
<div class="form-checkbox">
|
|
<input
|
|
type="checkbox"
|
|
id="agree"
|
|
v-model="registerForm.agree"
|
|
class="checkbox"
|
|
>
|
|
<label for="agree" class="checkbox-label">我同意服务条款和隐私政策</label>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
class="register-button"
|
|
:disabled="loading || !isFormValid"
|
|
>
|
|
<span v-if="!loading">注册</span>
|
|
<span v-else>注册中...</span>
|
|
</button>
|
|
</form>
|
|
|
|
<div class="social-login">
|
|
<p class="social-text">使用其他方式注册</p>
|
|
</div>
|
|
|
|
<div class="login-link">
|
|
<p>已有账户? <a href="#" class="login" @click.prevent="goToLogin"> 立即登录</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 右侧知识图谱可视化区域 -->
|
|
<div class="graph-container">
|
|
<!-- 背景装饰 -->
|
|
<div class="background-decoration">
|
|
<div class="bg-circle circle-1"></div>
|
|
<div class="bg-circle circle-2"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref, computed } from 'vue';
|
|
import { useRouter } from 'vue-router';
|
|
import { register } from '@/api/register';
|
|
|
|
const router = useRouter();
|
|
|
|
// 注册表单数据
|
|
const registerForm = ref({
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
agree: false,
|
|
avatar: null
|
|
});
|
|
|
|
// 状态变量
|
|
const fileInput = ref(null);
|
|
const avatarUploading = ref(false);
|
|
const avatarUploadError = ref('');
|
|
const loading = ref(false);
|
|
const errorMessage = ref('');
|
|
const errors = ref({
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: ''
|
|
});
|
|
|
|
// 默认头像
|
|
const defaultAvatar = '/resource/avatar/用户.png';
|
|
const avatarPreview = ref(defaultAvatar);
|
|
|
|
// 计算属性 - 表单验证
|
|
const isFormValid = computed(() => {
|
|
return registerForm.value.username &&
|
|
registerForm.value.password &&
|
|
registerForm.value.confirmPassword &&
|
|
registerForm.value.agree &&
|
|
!errors.value.username &&
|
|
!errors.value.password &&
|
|
!errors.value.confirmPassword &&
|
|
registerForm.value.password === registerForm.value.confirmPassword;
|
|
});
|
|
|
|
// 触发文件选择
|
|
const triggerFileInput = () => {
|
|
fileInput.value.click();
|
|
};
|
|
|
|
// 处理头像加载错误
|
|
const handleAvatarError = (event) => {
|
|
avatarPreview.value = defaultAvatar;
|
|
};
|
|
|
|
// 处理头像更改
|
|
const handleAvatarChange = (event) => {
|
|
const file = event.target.files[0];
|
|
if (file) {
|
|
// 检查文件类型
|
|
if (!file.type.startsWith('image/')) {
|
|
avatarUploadError.value = '请选择图片文件';
|
|
return;
|
|
}
|
|
|
|
// 检查文件大小 (限制为2MB)
|
|
if (file.size > 2 * 1024 * 1024) {
|
|
avatarUploadError.value = '图片大小不能超过2MB';
|
|
return;
|
|
}
|
|
|
|
avatarUploadError.value = '';
|
|
|
|
// 创建预览
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
avatarPreview.value = e.target.result;
|
|
registerForm.value.avatar = file;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
// 验证表单
|
|
const validateForm = () => {
|
|
errors.value = {
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: ''
|
|
};
|
|
|
|
// 验证用户名
|
|
if (!registerForm.value.username) {
|
|
errors.value.username = '用户名不能为空';
|
|
}
|
|
|
|
// 验证密码
|
|
if (!registerForm.value.password) {
|
|
errors.value.password = '密码不能为空';
|
|
}
|
|
|
|
// 验证确认密码
|
|
if (!registerForm.value.confirmPassword) {
|
|
errors.value.confirmPassword = '请确认密码';
|
|
} else if (registerForm.value.password !== registerForm.value.confirmPassword) {
|
|
errors.value.confirmPassword = '两次输入的密码不一致';
|
|
}
|
|
|
|
return !errors.value.username && !errors.value.password && !errors.value.confirmPassword;
|
|
};
|
|
|
|
// 处理注册
|
|
const handleRegister = async () => {
|
|
if (!validateForm()) {
|
|
return;
|
|
}
|
|
|
|
if (!registerForm.value.agree) {
|
|
errorMessage.value = '请同意服务条款和隐私政策';
|
|
return;
|
|
}
|
|
|
|
loading.value = true;
|
|
errorMessage.value = '';
|
|
|
|
try {
|
|
// 创建FormData对象
|
|
const formData = new FormData();
|
|
formData.append('username', registerForm.value.username);
|
|
formData.append('password', registerForm.value.password);
|
|
|
|
// 如果有头像，添加到FormData
|
|
if (registerForm.value.avatar) {
|
|
formData.append('avatar', registerForm.value.avatar);
|
|
}
|
|
|
|
// 调用注册API
|
|
const response = await register(formData);
|
|
|
|
if (response.success) {
|
|
// 注册成功，跳转到登录页面
|
|
router.push('/login');
|
|
} else {
|
|
errorMessage.value = response.message || '注册失败';
|
|
}
|
|
} catch (error) {
|
|
console.error('注册失败:', error);
|
|
errorMessage.value = error.response?.data?.message || '注册过程中发生错误';
|
|
} finally {
|
|
loading.value = false;
|
|
}
|
|
};
|
|
|
|
// 跳转到登录页面
|
|
const goToLogin = () => {
|
|
router.push('/login');
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
/* 全局样式，防止页面滚动 */
|
|
body, html {
|
|
margin: 0;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
height: 100%;
|
|
}
|
|
</style>
|
|
|
|
<style scoped>
|
|
/* 基础容器样式 */
|
|
.register-container {
|
|
display: flex;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
flex-direction: row;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
/* 左上角Logo和标题样式 */
|
|
.logo-header {
|
|
position: fixed;
|
|
top: 40px;
|
|
left: 25px;
|
|
display: flex;
|
|
align-items: center;
|
|
z-index: 10;
|
|
}
|
|
|
|
.logo {
|
|
height: 15px;
|
|
width: 15px;
|
|
margin-right: 7px;
|
|
}
|
|
|
|
.register-title {
|
|
font-size: 17px;
|
|
font-weight: 900;
|
|
font-family: 'SimSun Bold', '宋体', serif;
|
|
color: #1f2937;
|
|
margin: 0;
|
|
white-space: nowrap;
|
|
text-shadow: 0.4px 0.4px 0 #1f2937;
|
|
}
|
|
|
|
/* 左侧注册区域样式 */
|
|
.register-form-container {
|
|
width: 25%;
|
|
background-color: #ffffff;
|
|
padding: 2rem;
|
|
padding-left: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
position: relative;
|
|
}
|
|
|
|
.register-header {
|
|
margin-bottom: 1.5rem;
|
|
width: 100%;
|
|
max-width: 24rem;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.register-form {
|
|
max-width: 24rem;
|
|
width: 100%;
|
|
text-align: left;
|
|
}
|
|
|
|
.form-title {
|
|
font-size: 18px;
|
|
font-weight: 900;
|
|
color: #333333;
|
|
margin-top: -7px;
|
|
margin-bottom: 10px;
|
|
margin-left: 13px;
|
|
text-shadow: 0.2px 0.2px 0 #1f2937;
|
|
text-align: left;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.form-description {
|
|
color: #B5B5B5;
|
|
margin-bottom: 2rem;
|
|
margin-left: 13px;
|
|
text-align: left;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
/* 头像上传区域 */
|
|
.avatar-upload-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
margin-bottom: 25px;
|
|
margin-left: 13px;
|
|
}
|
|
|
|
.avatar-container {
|
|
position: relative;
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.avatar-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
border: 3px solid #e5e7eb;
|
|
}
|
|
|
|
.avatar-overlay {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
border-radius: 50%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
opacity: 0;
|
|
transition: opacity 0.2s;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.avatar-container:hover .avatar-overlay {
|
|
opacity: 1;
|
|
}
|
|
|
|
.camera-icon {
|
|
font-size: 1.2rem;
|
|
margin-bottom: 0.2rem;
|
|
}
|
|
|
|
.overlay-text {
|
|
font-size: 0.6rem;
|
|
color: white;
|
|
}
|
|
|
|
.hidden-input {
|
|
display: none;
|
|
}
|
|
|
|
.avatar-status {
|
|
text-align: center;
|
|
}
|
|
|
|
.uploading-text, .error-text {
|
|
font-size: 9px;
|
|
margin: 0.25rem 0;
|
|
}
|
|
|
|
.uploading-text {
|
|
color: #3b82f6;
|
|
}
|
|
|
|
.form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 1rem;
|
|
width: 100%;
|
|
}
|
|
|
|
.error-message {
|
|
color: #ef4444;
|
|
font-size: 11px;
|
|
padding: 0.5rem;
|
|
background-color: #fef2f2;
|
|
border: 1px solid #fecaca;
|
|
border-radius: 0.375rem;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 100%;
|
|
margin-bottom: 0.5rem;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 11px;
|
|
font-weight: 700;
|
|
color: #374151;
|
|
margin-bottom: 0.3rem;
|
|
text-align: left;
|
|
font-family:'STSong', '宋体', serif;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 0.6rem 0.8rem;
|
|
border-radius: 0.5rem;
|
|
border: 2px solid #A3A3A3;
|
|
transition: all 0.2s;
|
|
font-size: 9px;
|
|
box-sizing: border-box;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
background-color: #FFFFFF;
|
|
}
|
|
|
|
.form-input:focus {
|
|
outline: none;
|
|
border-color: #2563eb;
|
|
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.2);
|
|
}
|
|
|
|
.form-input.error {
|
|
border-color: #ef4444;
|
|
}
|
|
|
|
.form-input::placeholder {
|
|
color: #9ca3af;
|
|
}
|
|
|
|
.password-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 0.1rem;
|
|
}
|
|
|
|
.forgot-password {
|
|
font-size: 9px;
|
|
color: #B5B5B5;
|
|
text-decoration: none;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.forgot-password:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
.form-checkbox {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: -5px;
|
|
margin-bottom: -5px;
|
|
}
|
|
|
|
.checkbox {
|
|
height: 0.8rem;
|
|
width: 0.8rem;
|
|
color: #2563eb;
|
|
border-radius: 0.25rem;
|
|
border: 1px solid #d1d5db;
|
|
}
|
|
|
|
.checkbox-label {
|
|
margin-left: 0.1rem;
|
|
font-size: 11px;
|
|
color: #444040ba;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.register-button {
|
|
width: 100%;
|
|
background-color: #409EFF;
|
|
color: white;
|
|
font-weight: 500;
|
|
font-size: 11px;
|
|
padding: 0.6rem 0.8rem;
|
|
border-radius: 0;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
font-family: 'SimSun', '宋体', 'STSong', '华文宋体', serif;
|
|
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.login-icon {
|
|
height: 0.9rem;
|
|
width: auto;
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.register-button:hover:not(:disabled) {
|
|
background-color: #1d4ed8;
|
|
}
|
|
|
|
.register-button:disabled {
|
|
background-color: #bdc3c7;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.arrow-icon {
|
|
margin-left: 0.5rem;
|
|
}
|
|
|
|
/* 分割线样式 */
|
|
.divider {
|
|
display: flex;
|
|
align-items: center;
|
|
margin: 1.5rem 0;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.divider::before,
|
|
.divider::after {
|
|
content: '';
|
|
flex: 1;
|
|
height: 1px;
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
.divider span {
|
|
padding: 0 1rem;
|
|
font-size: 11px;
|
|
color: #B5B5B5;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.social-login {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.social-text {
|
|
text-align: center;
|
|
color: #B5B5B5;
|
|
margin-bottom: 1rem;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.social-icons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.social-icon {
|
|
width: 2.5rem;
|
|
height: 2.5rem;
|
|
border-radius: 50%;
|
|
background-color: #f3f4f6;
|
|
border: none;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: #6b7280;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.social-icon:hover {
|
|
background-color: #e5e7eb;
|
|
}
|
|
|
|
.login-link {
|
|
position: absolute;
|
|
bottom: 7px;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
text-align: center;
|
|
}
|
|
|
|
.login-link p {
|
|
color: #B5B5B5;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.login {
|
|
color: #B5B5B5;
|
|
font-weight: 500;
|
|
text-decoration: none;
|
|
font-weight: bold;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.login:hover {
|
|
color: #1d4ed8;
|
|
}
|
|
|
|
/* 右侧知识图谱可视化区域样式 */
|
|
.graph-container {
|
|
width: 75%;
|
|
background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%),
|
|
url('@/assets/背景.png');
|
|
background-size: cover;
|
|
background-position: center;
|
|
background-blend-mode: overlay;
|
|
padding: 2rem;
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.background-decoration {
|
|
position: absolute;
|
|
inset: 0;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.bg-circle {
|
|
position: absolute;
|
|
border-radius: 50%;
|
|
filter: blur(3rem);
|
|
}
|
|
|
|
.circle-1 {
|
|
top: 25%;
|
|
left: 25%;
|
|
width: 16rem;
|
|
height: 16rem;
|
|
background-color: #60a5fa;
|
|
}
|
|
|
|
.circle-2 {
|
|
bottom: 33%;
|
|
right: 33%;
|
|
width: 20rem;
|
|
height: 20rem;
|
|
background-color: #818cf8;
|
|
}
|
|
|
|
.graph-content {
|
|
position: relative;
|
|
z-index: 10;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100%;
|
|
font-family: 'SimSun', '宋体', serif;
|
|
}
|
|
|
|
.graph-wrapper {
|
|
position: relative;
|
|
width: 100%;
|
|
max-width: 48rem;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.error-text {
|
|
color: #ef4444;
|
|
font-size: 9px;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
/* 响应式设计 */
|
|
@media (max-width: 768px) {
|
|
.register-container {
|
|
flex-direction: column;
|
|
}
|
|
|
|
.register-form-container,
|
|
.graph-container {
|
|
width: 100%;
|
|
}
|
|
|
|
.register-form-container {
|
|
padding: 2rem;
|
|
}
|
|
|
|
.graph-container {
|
|
min-height: 400px;
|
|
}
|
|
}
|
|
</style>
|