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.
565 lines
13 KiB
565 lines
13 KiB
<template>
|
|
|
|
<div class="page-container">
|
|
<!-- 登录主容器 v-->
|
|
<div class="login-wrapper">
|
|
<!-- 系统logo+名称 -->
|
|
<div class="system-info">
|
|
<div class="logo-box">
|
|
<i class="el-icon-location logo-icon"></i>
|
|
</div>
|
|
<h1 class="system-title">网络化任务规划系统</h1>
|
|
</div>
|
|
|
|
<!-- 登录卡片 -->
|
|
<div class="login-card">
|
|
<!-- 登录/注册切换标签 -->
|
|
<div class="tab-container">
|
|
<button
|
|
@click="switchTab('login')"
|
|
:class="{ 'tab-active': activeTab === 'login' }"
|
|
class="tab-item"
|
|
>
|
|
<i class="el-icon-user mr-1"></i> 登录
|
|
</button>
|
|
<button
|
|
@click="switchTab('register')"
|
|
:class="{ 'tab-active': activeTab === 'register' }"
|
|
class="tab-item"
|
|
>
|
|
<i class="el-icon-edit mr-1"></i> 注册
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 表单容器 -->
|
|
<div class="form-container">
|
|
<!-- 登录表单 -->
|
|
<div v-if="activeTab === 'login'">
|
|
<!-- 账号输入 -->
|
|
<div class="form-item">
|
|
<label class="form-label">账号</label>
|
|
<div class="input-wrapper">
|
|
<i class="el-icon-user input-icon"></i>
|
|
<input
|
|
type="text"
|
|
v-model="form.username"
|
|
placeholder="请输入账号"
|
|
class="form-input"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 密码输入 -->
|
|
<div class="form-item">
|
|
<div class="pwd-label-wrapper">
|
|
<label class="form-label">密码</label>
|
|
<a href="#" class="forgot-pwd">忘记密码？</a>
|
|
</div>
|
|
<div class="input-wrapper">
|
|
<i class="el-icon-lock input-icon"></i>
|
|
<input
|
|
:type="showPwd ? 'text' : 'password'"
|
|
v-model="form.password"
|
|
placeholder="请输入密码"
|
|
class="form-input"
|
|
>
|
|
<i
|
|
@click="togglePwd"
|
|
:class="showPwd ? 'el-icon-view' : 'el-icon-hide'"
|
|
class="toggle-pwd-icon"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 记住密码 + 自动登录 -->
|
|
<div class="checkbox-group">
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" checked class="checkbox">
|
|
<span>记住密码</span>
|
|
</label>
|
|
<label class="checkbox-item">
|
|
<input type="checkbox" class="checkbox">
|
|
<span>自动登录</span>
|
|
</label>
|
|
</div>
|
|
|
|
<!-- 登录按钮 -->
|
|
<button
|
|
@click="handleLogin"
|
|
:class="{ 'login-btn-disabled': isLogging }"
|
|
class="login-btn"
|
|
>
|
|
{{ isLogging ? '登录中...' : '登录系统' }}
|
|
</button>
|
|
</div>
|
|
|
|
<!-- 注册表单 -->
|
|
<div v-else-if="activeTab === 'register'">
|
|
<!-- 账号输入 -->
|
|
<div class="form-item">
|
|
<label class="form-label">账号</label>
|
|
<div class="input-wrapper">
|
|
<i class="el-icon-user input-icon"></i>
|
|
<input
|
|
type="text"
|
|
v-model="form.username"
|
|
placeholder="请输入账号"
|
|
class="form-input"
|
|
>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 密码输入 -->
|
|
<div class="form-item">
|
|
<label class="form-label">密码</label>
|
|
<div class="input-wrapper">
|
|
<i class="el-icon-lock input-icon"></i>
|
|
<input
|
|
:type="showPwd ? 'text' : 'password'"
|
|
v-model="form.password"
|
|
placeholder="请输入密码"
|
|
class="form-input"
|
|
>
|
|
<i
|
|
@click="togglePwd"
|
|
:class="showPwd ? 'el-icon-view' : 'el-icon-hide'"
|
|
class="toggle-pwd-icon"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 确认密码输入 -->
|
|
<div class="form-item">
|
|
<label class="form-label">确认密码</label>
|
|
<div class="input-wrapper">
|
|
<i class="el-icon-lock input-icon"></i>
|
|
<input
|
|
:type="showConfirmPwd ? 'text' : 'password'"
|
|
v-model="form.confirmPassword"
|
|
placeholder="请确认密码"
|
|
class="form-input"
|
|
>
|
|
<i
|
|
@click="toggleConfirmPwd"
|
|
:class="showConfirmPwd ? 'el-icon-view' : 'el-icon-hide'"
|
|
class="toggle-pwd-icon"
|
|
></i>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 权限等级 -->
|
|
<div class="form-item">
|
|
<label class="form-label">权限等级</label>
|
|
<select
|
|
v-model="form.role"
|
|
class="form-select"
|
|
>
|
|
<option value="user">普通用户</option>
|
|
<option value="host">主持人</option>
|
|
<option value="admin">管理员</option>
|
|
</select>
|
|
</div>
|
|
|
|
<!-- 注册按钮 -->
|
|
<button
|
|
@click="handleRegister"
|
|
:class="{ 'login-btn-disabled': isRegistering }"
|
|
class="login-btn"
|
|
>
|
|
{{ isRegistering ? '注册中...' : '注册账号' }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 底部版权/提示 -->
|
|
<div class="copyright">
|
|
<p>© 2026 网络化任务规划系统 | 支持Windows/国产化系统互通</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
import { register } from "@/api/login";
|
|
|
|
export default {
|
|
name: 'Login',
|
|
data() {
|
|
return {
|
|
activeTab: 'login',
|
|
showPwd: false,
|
|
showConfirmPwd: false,
|
|
isLogging: false,
|
|
isRegistering: false,
|
|
// 表单数据
|
|
form: {
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
role: 'user' // 默认普通用户
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
switchTab(tab) {
|
|
this.activeTab = tab;
|
|
},
|
|
togglePwd() {
|
|
this.showPwd = !this.showPwd;
|
|
},
|
|
toggleConfirmPwd() {
|
|
this.showConfirmPwd = !this.showConfirmPwd;
|
|
},
|
|
async handleLogin() {
|
|
if (this.isLogging) return;
|
|
if (!this.form.username || !this.form.password) {
|
|
this.$message.error('请输入账号和密码');
|
|
return;
|
|
}
|
|
this.isLogging = true;
|
|
|
|
try {
|
|
const loginBody = {
|
|
username: this.form.username,
|
|
password: this.form.password
|
|
};
|
|
await this.$store.dispatch("Login", loginBody);
|
|
this.$router.push('/selectRoom');
|
|
} catch (error) {
|
|
// 这里的 error 通常是若依拦截器返回的对象，包含 msg
|
|
this.$message.error(error.msg || '登录失败');
|
|
} finally {
|
|
this.isLogging = false;
|
|
}
|
|
},
|
|
async handleRegister() {
|
|
if (this.isRegistering) return;
|
|
|
|
// 1. 表单校验
|
|
if (!this.form.username || !this.form.password || !this.form.confirmPassword) {
|
|
this.$message.error('请填写所有必填字段');
|
|
return;
|
|
}
|
|
|
|
if (this.form.password !== this.form.confirmPassword) {
|
|
this.$message.error('两次输入的密码不一致');
|
|
return;
|
|
}
|
|
|
|
this.isRegistering = true;
|
|
|
|
// 2. 转换角色值为后端数据库期望的数字格式
|
|
const roleMap = {
|
|
'admin': '1',
|
|
'host': '2',
|
|
'user': '3'
|
|
};
|
|
|
|
// 构造提交给后端 sys_user 表的数据
|
|
const regData = {
|
|
username: this.form.username,
|
|
password: this.form.password,
|
|
userLevel: roleMap[this.form.role] || '3' // 对齐数据库 role 字段
|
|
};
|
|
|
|
// 3. 调用 API 发送请求
|
|
register(regData).then(res => {
|
|
this.isRegistering = false;
|
|
this.$alert("<font color='red'>恭喜你，您的账号 " + regData.username + " 注册成功！</font>", '系统提示', {
|
|
dangerouslyUseHTMLString: true,
|
|
type: 'success'
|
|
}).then(() => {
|
|
this.switchTab('login');
|
|
// 清空表单
|
|
this.form = {
|
|
username: '',
|
|
password: '',
|
|
confirmPassword: '',
|
|
role: 'user'
|
|
};
|
|
});
|
|
}).catch(() => {
|
|
this.isRegistering = false;
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
/* 全局页面样式 */
|
|
.page-container {
|
|
background-color: #F9FAFB; /* 原 neutral 色值 */
|
|
min-height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 16px;
|
|
color: #333842; /* 原 dark 色值 */
|
|
font-family: Inter, system-ui, sans-serif;
|
|
}
|
|
|
|
/* 登录主容器 */
|
|
.login-wrapper {
|
|
width: 100%;
|
|
max-width: 320px;
|
|
}
|
|
|
|
/* 系统信息（logo+名称） */
|
|
.system-info {
|
|
text-align: center;
|
|
margin-bottom: 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12px;
|
|
}
|
|
|
|
.logo-box {
|
|
display: inline-block;
|
|
width: 48px;
|
|
height: 48px;
|
|
background-color: #165DFF; /* 原 primary 色值 */
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.logo-icon {
|
|
color: white;
|
|
font-size: 24px;
|
|
}
|
|
|
|
.system-title {
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #333842;
|
|
margin: 0;
|
|
}
|
|
|
|
.system-desc {
|
|
font-size: 12px;
|
|
color: #9CA3AF; /* 原 gray-500 色值 */
|
|
margin-top: 4px;
|
|
}
|
|
|
|
/* 登录卡片 */
|
|
.login-card {
|
|
background-color: white;
|
|
border-radius: 8px;
|
|
box-shadow: 0 4px 12px rgba(22, 93, 255, 0.08);
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 标签容器 */
|
|
.tab-container {
|
|
display: flex;
|
|
border-bottom: 1px solid #E5E7EB; /* 原 gray-200 色值 */
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
padding: 12px 0;
|
|
font-size: 14px;
|
|
text-align: center;
|
|
background: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
color: #333842;
|
|
transition: color 0.2s;
|
|
}
|
|
|
|
.tab-item:hover {
|
|
color: #165DFF; /* 原 primary 色值 */
|
|
}
|
|
|
|
.tab-active {
|
|
border-bottom: 2px solid #165DFF;
|
|
color: #165DFF;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* 表单容器 */
|
|
.form-container {
|
|
padding: 24px;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.form-item:last-of-type {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.form-label {
|
|
display: block;
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
margin-bottom: 4px;
|
|
color: #71717A; /* 原 gray-600 色值 */
|
|
}
|
|
|
|
/* 房间选择下拉框 */
|
|
.form-select {
|
|
width: 100%;
|
|
padding: 8px 12px;
|
|
border: 1px solid #E5E7EB;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.form-select:focus {
|
|
border-color: #165DFF;
|
|
}
|
|
|
|
/* 输入框容器 */
|
|
.input-wrapper {
|
|
position: relative;
|
|
}
|
|
|
|
.form-input {
|
|
width: 100%;
|
|
padding: 8px 12px 8px 36px;
|
|
border: 1px solid #E5E7EB;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
outline: none;
|
|
transition: border-color 0.2s;
|
|
}
|
|
|
|
.form-input:focus {
|
|
border-color: #165DFF;
|
|
}
|
|
|
|
.input-icon {
|
|
position: absolute;
|
|
left: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #9CA3AF; /* 原 gray-400 色值 */
|
|
}
|
|
|
|
/* 密码标签行 */
|
|
.pwd-label-wrapper {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.forgot-pwd {
|
|
font-size: 12px;
|
|
color: #165DFF;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.forgot-pwd:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 密码显隐图标 */
|
|
.toggle-pwd-icon {
|
|
position: absolute;
|
|
right: 12px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #9CA3AF;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* 复选框组 */
|
|
.checkbox-group {
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 12px;
|
|
margin-bottom: 24px;
|
|
}
|
|
|
|
.checkbox-item {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-right: 16px;
|
|
}
|
|
|
|
.checkbox {
|
|
margin-right: 4px;
|
|
color: #165DFF;
|
|
}
|
|
|
|
/* 登录按钮 */
|
|
.login-btn {
|
|
width: 100%;
|
|
background-color: #165DFF;
|
|
color: white;
|
|
padding: 8px 0;
|
|
border: none;
|
|
border-radius: 6px;
|
|
font-size: 14px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: background-color 0.2s;
|
|
}
|
|
|
|
.login-btn:hover {
|
|
background-color: rgba(22, 93, 255, 0.9);
|
|
}
|
|
|
|
.login-btn-disabled {
|
|
opacity: 0.8;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* 其他登录方式 */
|
|
.other-login {
|
|
text-align: center;
|
|
margin-top: 24px;
|
|
}
|
|
|
|
.other-login-desc {
|
|
font-size: 12px;
|
|
color: #9CA3AF;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.other-login-btns {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 16px;
|
|
}
|
|
|
|
.other-login-btn {
|
|
width: 32px;
|
|
height: 32px;
|
|
border-radius: 50%;
|
|
background-color: #E8F3FF; /* 原 secondary 色值 */
|
|
border: none;
|
|
color: #165DFF;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
cursor: pointer;
|
|
transition: all 0.2s;
|
|
}
|
|
|
|
.other-login-btn:hover {
|
|
background-color: #165DFF;
|
|
color: white;
|
|
}
|
|
|
|
/* 版权信息 */
|
|
.copyright {
|
|
text-align: center;
|
|
margin-top: 16px;
|
|
font-size: 12px;
|
|
color: #9CA3AF;
|
|
}
|
|
</style>
|
|
|
|
|