refactor(login): 重构登录页面
- 移除了 t-form组件,改为手动验证表单输入 - 调整了表单样式和布局 - 优化了代码结构,提高了代码可读性
This commit is contained in:
parent
bf6eb5b277
commit
7504b2a9de
|
@ -64,4 +64,4 @@ api.interceptors.response.use(
|
|||
}
|
||||
)
|
||||
|
||||
export default api
|
||||
export default api
|
||||
|
|
|
@ -51,4 +51,4 @@ export const userApi = {
|
|||
deleteUsers(ids) {
|
||||
return api.delete('/sysUser/batch', { data: { ids } })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -6,50 +6,45 @@
|
|||
<p class="login-subtitle">部署管理系统</p>
|
||||
</div>
|
||||
|
||||
<t-form
|
||||
ref="form"
|
||||
:data="formData"
|
||||
:rules="rules"
|
||||
@submit="handleSubmit"
|
||||
>
|
||||
<t-form-item name="username">
|
||||
<t-input
|
||||
v-model="formData.username"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
>
|
||||
<template #prefix-icon>
|
||||
<t-icon name="user" />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
<div class="login-form">
|
||||
<div class="form-item">
|
||||
<t-input
|
||||
v-model="formData.account"
|
||||
placeholder="请输入用户名"
|
||||
size="large"
|
||||
>
|
||||
<template #prefix-icon>
|
||||
<t-icon name="user" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
|
||||
<div class="form-item">
|
||||
<t-input
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix-icon>
|
||||
<t-icon name="lock-on" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
|
||||
<t-form-item name="password">
|
||||
<t-input
|
||||
v-model="formData.password"
|
||||
type="password"
|
||||
placeholder="请输入密码"
|
||||
size="large"
|
||||
@keyup.enter="handleSubmit"
|
||||
>
|
||||
<template #prefix-icon>
|
||||
<t-icon name="lock-on" />
|
||||
</template>
|
||||
</t-input>
|
||||
</t-form-item>
|
||||
|
||||
<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
|
||||
|
||||
|
@ -147,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,11 +17,11 @@ export default defineConfig({
|
|||
'/api': {
|
||||
target: 'http://localhost:3000',
|
||||
changeOrigin: true,
|
||||
rewrite: (path) => path.replace(/^\/api/, '')
|
||||
rewrite: (path) => path
|
||||
}
|
||||
}
|
||||
},
|
||||
build: {
|
||||
outDir: 'dist'
|
||||
}
|
||||
})
|
||||
})
|
||||
|
|
Loading…
Reference in New Issue