Compare commits

..

2 Commits

Author SHA1 Message Date
zhangtao 7504b2a9de refactor(login): 重构登录页面
- 移除了 t-form组件,改为手动验证表单输入
- 调整了表单样式和布局
- 优化了代码结构,提高了代码可读性
2025-08-01 18:53:45 +08:00
zhangtao bf6eb5b277 style:优化登录页面样式和全局样式
- 移除 Login.vue 中的多余 padding
- 在 App.vue 中添加全局样式重置,确保一致的样式表现
- 更新 App.vue 中的根元素类名,提高代码可读性
2025-08-01 18:36:30 +08:00
5 changed files with 65 additions and 58 deletions

View File

@ -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>

View File

@ -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>
<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>
<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>
<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;
}

View File

@ -17,7 +17,7 @@ export default defineConfig({
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
rewrite: (path) => path
}
}
},