64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<script setup lang="ts">
|
||
import { reactive, ref } from 'vue'
|
||
import { useRouter } from 'vue-router'
|
||
import { ElMessage } from 'element-plus'
|
||
import { resolveHomeRoute } from '../../services/access'
|
||
import { useAuthStore } from '../../stores/auth'
|
||
|
||
const router = useRouter()
|
||
const authStore = useAuthStore()
|
||
const loading = ref(false)
|
||
const form = reactive({
|
||
username: 'admin',
|
||
password: 'Admin@123',
|
||
})
|
||
|
||
async function submitLogin() {
|
||
loading.value = true
|
||
|
||
try {
|
||
await authStore.login(form.username, form.password)
|
||
ElMessage.success('登录成功')
|
||
await router.replace(resolveHomeRoute(authStore.user))
|
||
} catch (error) {
|
||
ElMessage.error(error instanceof Error ? error.message : '登录失败')
|
||
} finally {
|
||
loading.value = false
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div class="login-page">
|
||
<section class="login-hero">
|
||
<p class="login-kicker">COPPER TEAPOT SYSTEM</p>
|
||
<h1>铜壶管理系统</h1>
|
||
</section>
|
||
|
||
<section class="login-card">
|
||
<div class="login-card__head">
|
||
<p class="login-card__kicker">登录</p>
|
||
<h2>欢迎进入系统</h2>
|
||
<span>建议先用默认演示账号完成第一轮联调。</span>
|
||
</div>
|
||
|
||
<div class="login-card__form">
|
||
<label>账号</label>
|
||
<el-input v-model="form.username" placeholder="请输入账号" size="large" />
|
||
|
||
<label>密码</label>
|
||
<el-input v-model="form.password" placeholder="请输入密码" size="large" show-password />
|
||
|
||
<el-button class="login-card__button" type="primary" size="large" :loading="loading" @click="submitLogin">
|
||
登录系统
|
||
</el-button>
|
||
</div>
|
||
|
||
<!-- <el-alert type="info" :closable="false" show-icon>
|
||
<template #title>
|
||
默认账号：admin / Admin@123，customer / Customer@123，packer / Packer@123
|
||
</template>
|
||
</el-alert> -->
|
||
</section>
|
||
</div>
|
||
</template> |