refactor(login): 重构登录页面
- 移除了 t-form组件,改为手动验证表单输入 - 调整了表单样式和布局 - 优化了代码结构,提高了代码可读性
This commit is contained in:
parent
bf6eb5b277
commit
7504b2a9de
|
@ -6,15 +6,10 @@
|
||||||
<p class="login-subtitle">部署管理系统</p>
|
<p class="login-subtitle">部署管理系统</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<t-form
|
<div class="login-form">
|
||||||
ref="form"
|
<div class="form-item">
|
||||||
:data="formData"
|
|
||||||
:rules="rules"
|
|
||||||
@submit="handleSubmit"
|
|
||||||
>
|
|
||||||
<t-form-item name="username">
|
|
||||||
<t-input
|
<t-input
|
||||||
v-model="formData.username"
|
v-model="formData.account"
|
||||||
placeholder="请输入用户名"
|
placeholder="请输入用户名"
|
||||||
size="large"
|
size="large"
|
||||||
>
|
>
|
||||||
|
@ -22,9 +17,9 @@
|
||||||
<t-icon name="user" />
|
<t-icon name="user" />
|
||||||
</template>
|
</template>
|
||||||
</t-input>
|
</t-input>
|
||||||
</t-form-item>
|
</div>
|
||||||
|
|
||||||
<t-form-item name="password">
|
<div class="form-item">
|
||||||
<t-input
|
<t-input
|
||||||
v-model="formData.password"
|
v-model="formData.password"
|
||||||
type="password"
|
type="password"
|
||||||
|
@ -36,20 +31,20 @@
|
||||||
<t-icon name="lock-on" />
|
<t-icon name="lock-on" />
|
||||||
</template>
|
</template>
|
||||||
</t-input>
|
</t-input>
|
||||||
</t-form-item>
|
</div>
|
||||||
|
|
||||||
<t-form-item>
|
<div class="form-item">
|
||||||
<t-button
|
<t-button
|
||||||
type="submit"
|
|
||||||
theme="primary"
|
theme="primary"
|
||||||
size="large"
|
size="large"
|
||||||
block
|
block
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
|
@click="handleSubmit"
|
||||||
>
|
>
|
||||||
登录
|
登录
|
||||||
</t-button>
|
</t-button>
|
||||||
</t-form-item>
|
</div>
|
||||||
</t-form>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -58,30 +53,29 @@
|
||||||
import { ref, reactive } from 'vue'
|
import { ref, reactive } from 'vue'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { MessagePlugin } from 'tdesign-vue-next'
|
import { MessagePlugin } from 'tdesign-vue-next'
|
||||||
|
|
||||||
import { userApi } from '@/api/user'
|
import { userApi } from '@/api/user'
|
||||||
import auth from '@/utils/auth'
|
import auth from '@/utils/auth'
|
||||||
|
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const form = ref()
|
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
|
|
||||||
const formData = reactive({
|
const formData = reactive({
|
||||||
username: '',
|
account: '',
|
||||||
password: ''
|
password: '',
|
||||||
|
checked: true
|
||||||
})
|
})
|
||||||
|
|
||||||
const rules = {
|
|
||||||
username: [
|
|
||||||
{ required: true, message: '请输入用户名', type: 'error' }
|
|
||||||
],
|
|
||||||
password: [
|
|
||||||
{ required: true, message: '请输入密码', type: 'error' }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
const handleSubmit = async () => {
|
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
|
loading.value = true
|
||||||
|
|
||||||
|
@ -147,10 +141,18 @@ const handleSubmit = async () => {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
:deep(.t-form-item) {
|
.login-form {
|
||||||
|
margin-top: 32px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
margin-bottom: 24px;
|
margin-bottom: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.form-item:last-child {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
:deep(.t-input) {
|
:deep(.t-input) {
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
}
|
}
|
||||||
|
|
|
@ -17,7 +17,7 @@ export default defineConfig({
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://localhost:3000',
|
target: 'http://localhost:3000',
|
||||||
changeOrigin: true,
|
changeOrigin: true,
|
||||||
rewrite: (path) => path.replace(/^\/api/, '')
|
rewrite: (path) => path
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue