fix: repair login page styles and feedback logic

- Fix login page background and button styles using fixed color values
- Add ElMessage success/error feedback for login attempts
- Replace window.location.href with router.push for proper navigation
- Improve input field styles for dark theme
feature/20260628/refactor-frontend-modernization
Lxy 3 weeks ago
parent 780e85bde4
commit 90d5f32098

@ -42,10 +42,13 @@
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { User, Lock } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import type { FormInstance } from 'element-plus'
import { useUserStore } from '@/stores/modules/user'
const router = useRouter()
const userStore = useUserStore()
const formRef = ref<FormInstance>()
const loading = ref(false)
@ -68,9 +71,10 @@ const handleLogin = async () => {
loading.value = true
try {
await userStore.login(loginForm.username, loginForm.password)
window.location.href = '/'
} catch (error) {
console.error('Login failed:', error)
ElMessage.success('登录成功')
router.push('/')
} catch (error: any) {
ElMessage.error(error.message || '登录失败,请检查用户名和密码')
} finally {
loading.value = false
}
@ -85,24 +89,62 @@ const handleLogin = async () => {
align-items: center;
justify-content: center;
min-height: 100vh;
background: var(--bg0);
background-color: #0d1117;
background-image: linear-gradient(135deg, #0d1117 0%, #161b22 100%);
}
.login-card {
width: 400px;
background: var(--bg1);
border-color: var(--bd);
background-color: #161b22;
border: 1px solid #30363d;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
:deep(.el-card__header) {
background: var(--bg2);
border-bottom-color: var(--bd);
background-color: #1c2333;
border-bottom: 1px solid #30363d;
padding: 20px;
}
:deep(.el-card__body) {
padding: 30px;
}
:deep(.el-input__wrapper) {
background-color: #0d1117;
border-color: #30363d;
&:hover, &.is-focus {
border-color: #58a6ff;
}
}
:deep(.el-input__inner) {
color: #e6edf3;
}
}
.login-title {
margin: 0;
text-align: center;
color: var(--t1);
color: #e6edf3;
font-size: 20px;
font-weight: 600;
}
:deep(.el-button--primary) {
background-color: #58a6ff;
border-color: #58a6ff;
color: #ffffff;
&:hover {
background-color: #79b8ff;
border-color: #79b8ff;
}
&:active {
background-color: #4c93e8;
border-color: #4c93e8;
}
}
</style>

Loading…
Cancel
Save