slibra-module-web/src/views/login/LoginView.vue

<script setup>
import { ref, unref } from 'vue';
import { useRouter } from 'vue-router';
import { NButton } from 'naive-ui';
import { SvgIcon } from '@/components';
import { useUserStore } from '@/stores/modules/userStore';
import { userApi } from '@/api/user';
import { TheArchival } from "@/components"

const router = useRouter();
const userStore = useUserStore();

const errorMsg = ref('');
const loading = ref(false);

const loginFormData = ref({
  username: '',
  password: ''
})

const handleSubmit = async () => {
  const { username, password } = unref(loginFormData);

  if (!username) {
    return errorMsg.value = '请输入用户名称'
  }
  if (!password) {
    return errorMsg.value = '请输入登录密码'
  }

  try {
    loading.value = true;
    const { token } = await userApi.postLogin({ username, password, type: 0 });
    userStore.setUserInfo({ token });
    const { user } = await userApi.getUserInfo();
    errorMsg.value = '';
    userStore.setUserInfo({ ...user });
    router.push("/");
  }
  catch (error) {
    errorMsg.value = error.msg;
  }
  finally {
    loading.value = false;
  }
}

</script>

<template>
  <div class="login-viewport">
    <div class="logo absolute w-[106px] space-x-[6px] h-[28px] top-[14px] left-[20px]">
      <img src="@/assets/svgs/common/logo.svg" alt="logo" />
      <span class="text">LibraAI智能体运营平台</span>
    </div>

    <main class="main flex items-center space-x-[98px]">
      <div class="text-[#07233C] pb-[90px]">
        <div class="text-title mb-[8px] text-[36px] font-bold leading-[44px]">
          <p class="text-[#2454FF]">LibraAI</p>
          <p>首家水务领域垂直大模型</p>
        </div>
        <p class="w-[540px] text-[18px] text-justify leading-[26px]">
          赋能水务行业，将海量水务数据与大模型能力相融合 <br>
          为水务行业主体提供创新应用和全面支持
        </p>
      </div>
      
      <div class="login-form w-[442px] h-[454px] bg-white rounded-[16px]">
        <p class="title pl-[2px] mb-[30px] text-[28px] leading-[40px] font-bold">系统登录</p>
        <div class="form-inner w-full">
          <ul class="form-inp-list">
            <li class="inp-item-inner">
              <input type="text" placeholder="请输入用户名称" v-model="loginFormData.username">
            </li>
            <li class="inp-item-inner">
              <input type="password" placeholder="请输入登录密码" v-model="loginFormData.password">
            </li>
          </ul>
          <div class="waring-feedback h-[32px] text-[12px] text-[#FF7152]">
            <p class="flex items-center justify-center h-full space-x-[8px] bg-[#FFF1F0]" v-show="errorMsg">
              <SvgIcon name="login-warning-tips"></SvgIcon>
              <span>{{ errorMsg }}</span>
            </p>
          </div>
        </div>
        <NButton block color="#2454FF" size="large" :loading="loading" @click="handleSubmit">登 录</NButton>
        <TheArchival class="info"></TheArchival>
      </div>
    </main>
  </div>
</template>

<style scoped lang="scss">
.n-button {
  height: 54px;

  &:hover {
    background: #1d43cc;
  }
}

.login-viewport {
  position: relative;
  @include flex(x, center, center);
  height: 100vh;
  background: url("@/assets/images/login/bg-login.png") no-repeat;
  background-size: 100% 100%;
  overflow: hidden;

  .logo {
    @include flex(x, center, center);
    .text {
      font-size: 11px;
      font-family: AlimamaShuHeiTi;
      font-weight: bold;
      line-height: 12px;
    }
  }

  .text-title {
    font-family: AlimamaShuHeiTi;
    p:nth-child(1) {
      background: linear-gradient(92.36deg, #5ABBF2 4.56%, #2454FF 20.02%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .login-form {
    position: relative;
    @include flex(y, start, between);
    padding: 63px 61px 66px 61px;
    
    .info {
      position: absolute;
      left: 50%;
      bottom: -60px;
      text-align: center;
      white-space: nowrap;
      transform: translateX(-50%);
    }

    .title {
      background: url("@/assets/images/login/bg-title.png") left bottom no-repeat;
    }

    .form-inp-list {
      width: 100%;
      margin-bottom: 8px;

      .inp-item-inner {
        border-radius: 2px;
        overflow: hidden;

        input {
          width: 100%;
          padding: 16px 20px;
          background: #F2F4F9;
          font-size: 16px;
          line-height: 22px;
          color: #1A2029;
          outline: none;

          &::placeholder {
            color: #989EA7;
          }
        }

        &:nth-child(1) {
          margin-bottom: 18px;
        }
      }
    }
  }
}
</style>