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

Loading…
Cancel
Save