Compare commits
2 Commits
d6ba24ae33
...
7504b2a9de
Author | SHA1 | Date |
---|---|---|
|
7504b2a9de | |
|
bf6eb5b277 |
10
src/App.vue
10
src/App.vue
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<div class="app-container">
|
||||
<!-- 登录页面不显示布局 -->
|
||||
<router-view v-if="$route.path === '/login'" />
|
||||
<!-- 主应用布局 -->
|
||||
|
@ -14,7 +14,13 @@ import AppLayout from '@/components/AppLayout.vue'
|
|||
</script>
|
||||
|
||||
<style>
|
||||
#app {
|
||||
/* 全局样式重置 */
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.app-container {
|
||||
font-family: 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
|
||||
}
|
||||
</style>
|
|
@ -6,15 +6,10 @@
|
|||
<p class="login-subtitle">部署管理系统</p>
|
||||
</div>
|
||||
|
||||
<t-form
|
||||
ref="form"
|
||||
:data="formData"
|
||||
:rules="rules"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<t-form-item name="username">
|
||||
<div class="login-form">
|
||||
<div class="form-item">
|
||||
<t-input
|
||||
v-model="formData.username"
|
||||
v-model="formData.account"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
>
|
||||
|
@ -22,9 +17,9 @@
|
|||
<t-icon name="user" />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
</div>
|
||||
|
||||
<t-form-item name="password">
|
||||
<div class="form-item">
|
||||
<t-input
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
|
@ -36,20 +31,20 @@
|
|||
<t-icon name="lock-on" />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
</div>
|
||||
|
||||
<t-form-item>
|
||||
<div class="form-item">
|
||||
<t-button
|
||||
type="submit"
|
||||
theme="primary"
|
||||
size="large"
|
||||
block
|
||||
:loading="loading"
|
||||
@click="handleSubmit"
|
||||
>
|
||||
登录
|
||||
</t-button>
|
||||
</t-form-item>
|
||||
</t-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -58,30 +53,29 @@
|
|||
import { ref, reactive } from 'vue'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { MessagePlugin } from 'tdesign-vue-next'
|
||||
|
||||
import { userApi } from '@/api/user'
|
||||
import auth from '@/utils/auth'
|
||||
|
||||
const router = useRouter()
|
||||
const form = ref()
|
||||
const loading = ref(false)
|
||||
|
||||
const formData = reactive({
|
||||
username: '',
|
||||
password: ''
|
||||
account: '',
|
||||
password: '',
|
||||
checked: true
|
||||
})
|
||||
|
||||
const rules = {
|
||||
username: [
|
||||
{ required: true, message: '请输入用户名', type: 'error' }
|
||||
],
|
||||
password: [
|
||||
{ required: true, message: '请输入密码', type: 'error' }
|
||||
]
|
||||
}
|
||||
|
||||
const handleSubmit = async () => {
|
||||
const valid = await form.value.validate()
|
||||
if (!valid) return
|
||||
// 简单的表单验证
|
||||
if (!formData.account.trim()) {
|
||||
MessagePlugin.error('请输入用户名')
|
||||
return
|
||||
}
|
||||
if (!formData.password.trim()) {
|
||||
MessagePlugin.error('请输入密码')
|
||||
return
|
||||
}
|
||||
|
||||
loading.value = true
|
||||
|
||||
|
@ -118,7 +112,6 @@ const handleSubmit = async () => {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
|
@ -148,10 +141,18 @@ const handleSubmit = async () => {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
:deep(.t-form-item) {
|
||||
.login-form {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.form-item:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
:deep(.t-input) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
|
|
@ -17,7 +17,7 @@ export default defineConfig({
|
|||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
rewrite: (path) => path
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
Loading…
Reference in New Issue