claude_dev
a5b00c2dea
- Vite+TS+ElementPlus+ECharts+Pinia+Router+Axios - auth store + JWT axios 拦截器 + 路由守卫 - 登录页 + Layout（侧栏 4 入口，回测/投研 active，模拟/实盘 disabled） - 占位页（backtest/factor，S1/S2 填充） - vitest auth store 3 tests passed + build 通过(dist 生成)
70 lines
1.8 KiB
Vue
70 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { ref, reactive } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { ElMessage } from 'element-plus'
|
|
import { apiClient } from '@/api/client'
|
|
import { useAuthStore } from '@/stores/auth'
|
|
|
|
const router = useRouter()
|
|
const auth = useAuthStore()
|
|
|
|
const loading = ref(false)
|
|
const form = reactive({ username: 'admin', password: '' })
|
|
|
|
async function onSubmit(): Promise<void> {
|
|
if (!form.username || !form.password) {
|
|
ElMessage.warning('请输入用户名和密码')
|
|
return
|
|
}
|
|
loading.value = true
|
|
try {
|
|
const { data } = await apiClient.post<{ token: string }>('/auth/login', {
|
|
username: form.username,
|
|
password: form.password,
|
|
})
|
|
auth.setToken(data.token, form.username)
|
|
router.push('/')
|
|
} catch {
|
|
ElMessage.error('登录失败：用户名或密码错误')
|
|
} finally {
|
|
loading.value = false
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="login-wrap">
|
|
<el-card class="login-card">
|
|
<template #header>
|
|
<h2 class="login-title">三国量化研究台</h2>
|
|
</template>
|
|
<el-form label-position="top" @submit.prevent="onSubmit">
|
|
<el-form-item label="用户名">
|
|
<el-input v-model="form.username" placeholder="admin" />
|
|
</el-form-item>
|
|
<el-form-item label="密码">
|
|
<el-input v-model="form.password" type="password" show-password placeholder="请输入密码" @keyup.enter="onSubmit" />
|
|
</el-form-item>
|
|
<el-button type="primary" :loading="loading" style="width: 100%" @click="onSubmit">登录</el-button>
|
|
</el-form>
|
|
</el-card>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.login-wrap {
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #f0f2f5;
|
|
}
|
|
.login-card {
|
|
width: 360px;
|
|
}
|
|
.login-title {
|
|
margin: 0;
|
|
text-align: center;
|
|
}
|
|
</style>
|