feat: 简化登录页面样式

- 隐藏租户选择、记住密码切换按钮
- 移除手机/二维码/注册/三方登录/忘记密码
- Logo 添加苹果风格圆角矩形
- 开发环境开启自动填充,生产环境关闭
This commit is contained in:
tangweijie 2026-01-21 00:15:15 +08:00
parent 88fe4674b6
commit 6c6c946b04
2 changed files with 29 additions and 37 deletions

View File

@ -9,7 +9,7 @@
>
<!-- 左上角的 logo + 系统标题 -->
<div class="relative flex items-center text-white">
<img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" />
<img alt="" class="mr-10px h-48px w-48px rounded-[22px]" src="@/assets/imgs/logo.png" />
<span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
</div>
<!-- 左边的背景图 + 欢迎语 -->
@ -21,7 +21,7 @@
>
<img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
<div key="2" class="text-3xl text-white">{{ t('login.welcome') }}</div>
<div key="3" class="mt-5 text-14px font-normal text-white">
<div key="3" class="mt-5 text-14px font-normal text-white login-message">
{{ t('login.message') }}
</div>
</TransitionGroup>
@ -51,16 +51,6 @@
>
<!-- 账号登录 -->
<LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 手机登录 -->
<MobileForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 二维码登录 -->
<QrCodeForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 注册 -->
<RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 三方登录 -->
<SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
<!-- 忘记密码 -->
<ForgetPasswordForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
</div>
</Transition>
</div>
@ -75,7 +65,7 @@ import { useAppStore } from '@/store/modules/app'
import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue, ForgetPasswordForm } from './components'
import { LoginForm } from './components'
defineOptions({ name: 'Login' })
@ -106,6 +96,12 @@ $prefix-cls: #{$namespace}-login;
}
}
}
.login-message {
columns: 2;
column-gap: 20px;
line-height: 1.8;
}
</style>
<style lang="scss">

View File

@ -25,7 +25,8 @@
<LoginFormTitle class="w-full" />
</el-form-item>
</el-col>
<el-col :span="24" class="px-10px">
<!-- 租户选择已隐藏默认使用租户1 -->
<!-- <el-col :span="24" class="px-10px">
<el-form-item v-if="loginData.tenantEnable === 'true'" prop="tenantName">
<el-input
v-model="loginData.loginForm.tenantName"
@ -35,13 +36,14 @@
type="primary"
/>
</el-form-item>
</el-col>
</el-col> -->
<el-col :span="24" class="px-10px">
<el-form-item prop="username">
<el-input
v-model="loginData.loginForm.username"
:placeholder="t('login.usernamePlaceholder')"
:prefix-icon="iconAvatar"
:autocomplete="autoComplete"
/>
</el-form-item>
</el-col>
@ -53,28 +55,16 @@
:prefix-icon="iconLock"
show-password
type="password"
:autocomplete="autoComplete"
@keyup.enter="getCode()"
/>
</el-form-item>
</el-col>
<el-col :span="24" class="px-10px mt-[-20px] mb-[-20px]">
<el-col :span="24" class="px-10px mt-[-20px] mb-[-10px]">
<el-form-item>
<el-row justify="space-between" style="width: 100%">
<el-col :span="6">
<el-checkbox v-model="loginData.loginForm.rememberMe">
{{ t('login.remember') }}
</el-checkbox>
</el-col>
<el-col :offset="6" :span="12">
<el-link
class="float-right"
type="primary"
@click="setLoginState(LoginStateEnum.RESET_PASSWORD)"
>
{{ t('login.forgetPassword') }}
</el-link>
</el-col>
</el-row>
<el-checkbox v-model="loginData.loginForm.rememberMe">
{{ t('login.remember') }}
</el-checkbox>
</el-form-item>
</el-col>
<el-col :span="24" class="px-10px">
@ -96,7 +86,8 @@
mode="pop"
@success="handleLogin"
/>
<el-col :span="24" class="px-10px">
<!-- 底部切换按钮已隐藏 -->
<!-- <el-col :span="24" class="px-10px">
<el-form-item>
<el-row :gutter="5" justify="space-between" style="width: 100%">
<el-col :span="8">
@ -153,7 +144,7 @@
</el-link>
</div>
</el-form-item>
</el-col>
</el-col> -->
</el-row>
</el-form>
</template>
@ -189,6 +180,11 @@ const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文
const getShow = computed(() => unref(getLoginState) === LoginStateEnum.LOGIN)
//
const autoComplete = computed(() => {
return import.meta.env.DEV ? 'on' : 'off'
})
const LoginRules = {
tenantName: [required],
username: [required],
@ -197,13 +193,13 @@ const LoginRules = {
const loginData = reactive({
isShowPassword: false,
captchaEnable: import.meta.env.VITE_APP_CAPTCHA_ENABLE,
tenantEnable: import.meta.env.VITE_APP_TENANT_ENABLE,
tenantEnable: 'false', //
loginForm: {
tenantName: import.meta.env.VITE_APP_DEFAULT_LOGIN_TENANT || '',
tenantName: '1', // ID1
username: import.meta.env.VITE_APP_DEFAULT_LOGIN_USERNAME || '',
password: import.meta.env.VITE_APP_DEFAULT_LOGIN_PASSWORD || '',
captchaVerification: '',
rememberMe: true //
rememberMe: true //
}
})