@ -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 : 100 vh ;
min - height : 100 vh ;
background : var ( -- bg0 ) ;
background - color : # 0 d1117 ;
background - image : linear - gradient ( 135 deg , # 0 d1117 0 % , # 161 b22 100 % ) ;
}
}
. login - card {
. login - card {
width : 400 px ;
width : 400 px ;
background : var ( -- bg1 ) ;
background - color : # 161 b22 ;
border - color : var ( -- bd ) ;
border : 1 px solid # 30363 d ;
border - radius : 8 px ;
box - shadow : 0 4 px 12 px rgba ( 0 , 0 , 0 , 0.5 ) ;
: deep ( . el - card _ _header ) {
: deep ( . el - card _ _header ) {
background : var ( -- bg2 ) ;
background - color : # 1 c2333 ;
border - bottom - color : var ( -- bd ) ;
border - bottom : 1 px solid # 30363 d ;
padding : 20 px ;
}
: deep ( . el - card _ _body ) {
padding : 30 px ;
}
: deep ( . el - input _ _wrapper ) {
background - color : # 0 d1117 ;
border - color : # 30363 d ;
& : hover , & . is - focus {
border - color : # 58 a6ff ;
}
}
: 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 : 20 px ;
font - size : 20 px ;
font - weight : 600 ;
}
: deep ( . el - button -- primary ) {
background - color : # 58 a6ff ;
border - color : # 58 a6ff ;
color : # ffffff ;
& : hover {
background - color : # 79 b8ff ;
border - color : # 79 b8ff ;
}
& : active {
background - color : # 4 c93e8 ;
border - color : # 4 c93e8 ;
}
}
}
< / style >
< / style >