sg-cloud/src/views/LoginView/LoginView.vue

<script setup>
    import { ref } from 'vue';
    import { useRouter } from 'vue-router';
    import { useAuthStore } from '@/stores';
    import { MessagePlugin } from 'tdesign-vue-next';

    const router = useRouter(); // 类似 this.$router

    const { loginWithPassword } = useAuthStore();

    const { APP_TITLE } = import.meta.env; // 获取环境变量 标题
    const title = ref(APP_TITLE); // 标题

    const formRules = { // form规则
        phone: [{ required: true, message: '请输入账户' }],
        password: [{ required: true, message: '请输入密码' }],
    };
    const form = ref(); // 类似 this.$ref
    const formData = ref({ // 表单数据
        phone: '18188888888',
        password: 'asdf1234',
    });

    const onSubmit = ({ validateResult }) => { // 提交函数
        if (validateResult !== true) return; // 表单校验
        // 发送请求
        loginWithPassword(formData.value).then(() => {
            router.replace('/');
            MessagePlugin.success('登录成功');
        }).catch(({ message }) => {
            if (message) MessagePlugin.error(message);
        });
    };

</script>

<template>
    <div :class="s.root">
        <!--    登录卡片    -->
        <div class="login-card">
            <!--     标题       -->
            <span class="title">{{ title }}</span>
            <!--     表单       -->
            <t-form ref="form" :data="formData" :rules="formRules" :label-width="0" @submit="onSubmit">
                <t-form-item name="phone">
                    <t-input v-model="formData.phone" clearable placeholder="请输入账户名" />
                </t-form-item>

                <t-form-item name="password">
                    <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码" />
                </t-form-item>

                <t-form-item>
                    <t-button theme="primary" type="submit" block>
                        登录
                    </t-button>
                </t-form-item>
            </t-form>
        </div>
    </div>
</template>

<style lang="less" module="s">
    .root {
        height: inherit;
        background: url("../../assets/login_bg.png") no-repeat scroll center bottom transparent;
        background-size: cover;
        //
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        :global {
            .login-card {
                position: relative;
                width: 70vh;
                min-width: 380px;
                padding: 8vh 10vh;
                border-radius: var(--td-radius-extraLarge);
                background-color: fade(black, 40%);
                backdrop-filter: blur(5px);
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                align-items: center;

                .title {
                    position: absolute;
                    top: 0;
                    transform: translateY(calc(-150% - var(--td-comp-margin-m)));
                    color: white;
                    //font-size: var(--td-font-size-display-large);
                    font-size: 8vh;
                    white-space: nowrap;
                    letter-spacing: 1vw;
                    text-shadow: 0 0 8px black;
                }

                .t-form {
                    min-width: 280px;
                    width: 20vw;

                    .t-input {
                        color: white;
                        background-color: transparent;

                        &:focus {
                            box-shadow: unset;
                        }

                        .t-input__inner {
                            color: white;

                            &::placeholder {
                                color: fade(white, 70%);
                            }
                        }

                        .t-input__suffix > .t-icon {
                            color: fade(white, 40%);

                            &:hover {
                                color: fade(white, 90%);
                            }
                        }
                    }

                    .t-input--focused {
                        box-shadow: unset;
                    }
                }
            }
        }
    }
</style>