kicc-ui/src/views/system/ssoLogin/kics/index.vue

<template>
  <div :class="prefixCls" class="login-background-img">
    <AppLocalePicker v-if="showLocale" class="absolute top-4 right-4 enter-x xl:text-gray-600" :showText="false"/>
    <AppDarkModeToggle class="absolute top-3 right-10 enter-x"/>
    <div v-if="!getIsMobile" class="aui-logo">
      <div>
        <h3>
          <img :src="logoImg" alt="">
        </h3>
      </div>
    </div>
    <div v-else class="aui-phone-logo">
      <img :src="logoPhoneImg" alt="">
    </div>
    <main class="aui-content">
      <div class="aui-container">
        <div class="aui-form">
          <div class="aui-image">
            <div class="aui-image-text"/>
          </div>
          <div class="aui-formBox">
            <div class="aui-formWell">
              <div class="aui-flex aui-form-nav">
                <div class="aui-flex-box">登录 | LOGIN</div>
              </div>
              <div class="aui-form-box" style="height: 150px">
                <a-form
                  ref="loginRef"
                  :model="formData"
                  @keypress.enter="handleLogin"
                >
                  <div class="aui-account">
                    <div class="aui-inputClear">
                      <i class="icon icon-code"/>
                      <a-form-item>
                        <a-input v-model:value="formData.username" class="fix-auto-fill" :placeholder="t('sys.login.userName')"/>
                      </a-form-item>
                    </div>
                    <div class="aui-inputClear">
                      <i class="icon icon-password"/>
                      <a-form-item>
                        <a-input
                          v-model:value="formData.password"
                          class="fix-auto-fill"
                          type="password"
                          :placeholder="t('sys.login.password')"
                        />
                      </a-form-item>
                    </div>
                  </div>
                </a-form>
              </div>
              <div class="aui-formButton">
                <div class="aui-flex">
                  <a-button
                    :loading="loginLoading"
                    class="aui-link-login aui-flex-box"
                    type="primary"
                    @click="handleLogin"
                  >{{ t('sys.login.loginButton') }}</a-button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </main>
    <footer class="footer text-white text-center">
      <a href="#">Copyright</a> © 2021-2023 KANGLAI BIOLOGY BEAUTY
      <a href="https://beian.miit.gov.cn/" target="_blank">湘ICP备20001570号-2</a>
    </footer>
  </div>
</template>
<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { useUserStore } from '/@/store/modules/user';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useI18n } from '/@/hooks/web/useI18n';
  import logoImg from '/@/assets/ssoLogin/kics/icon/logo.png';
  import logoPhoneImg from '/@/assets/images/logo.png';
  import { AppLocalePicker, AppDarkModeToggle } from '/@/components/Application';
  import { useLocaleStore } from '/@/store/modules/locale';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useAppInject } from '/@/hooks/web/useAppInject';

  const { prefixCls } = useDesign('sso-kics-login');

  const { notification, createMessage } = useMessage();
  const userStore = useUserStore();
  const { t } = useI18n();
  const localeStore = useLocaleStore();
  const showLocale = localeStore.getShowPicker;

  const formData = reactive<Recordable>({
    username: '',
    password: '',
  });
  const loginRef = ref();
  const loginLoading = ref<boolean>(false);
  const { getIsMobile } = useAppInject();

  async function handleLogin() {
    if (!formData.username) {
      createMessage.warn(t('sys.login.accountPlaceholder'));
      return;
    }
    if (!formData.password) {
      createMessage.warn(t('sys.login.passwordPlaceholder'));
      return;
    }
    try {
      loginLoading.value = true;
      await userStore.login({
        password: formData.password,
        username: formData.username,
        goHome: false,
        clientId: 'kics',
        performPostLoginAction: false
      });
      // sso重定向到资源系统
      document.location.reload();
    } finally {
      loginLoading.value = false;
    }
  }

</script>

<style lang="less" scoped>
  @import '/@/assets/loginmini/style/home.less';
  @import '/@/assets/loginmini/style/base.less';

  .login-background-img {
    width: 100%;
    height: 100%;
  }

  .aui-image-text {
    height: 400px;
    background-image: none;
  }

  :deep(.ant-input:focus) {
    box-shadow: none;
  }

  .aui-link-login{
    height: 42px;
    padding: 10px 15px;
    font-size: 14px;
    border-radius: 8px;
    margin-top: 15px;
    margin-bottom: 8px;
  }

  .aui-phone-logo{
    position: absolute;
    margin-left: 10px;
    width: 60px;
    top:2px;
    z-index: 4;
  }

  .top-3{
    top: 0.45rem;
  }

  .aui-form-nav .aui-flex-box{
    color: #3EB041 !important;
  }

  .aui-container {
    max-width: 750px;
    border-radius: 18px;
    overflow: hidden;
  }

  .aui-image {
    background-image: url(/@/assets/ssoLogin/kics/icon/login-ad.jpg);
  }

  .footer {
    position: fixed;
    bottom: 9px;
    width: 100%;
    font-size: 17px;
    font-weight: bold;
    user-select: none;
    a {
      color: #FFFFFF;
    }
  }
</style>

<style lang="less">
  @prefix-cls: ~'@{namespace}-sso-kics-login';
  @dark-bg: #293146;

  html[data-theme='dark'] {
    .@{prefix-cls} {
      background-color: @dark-bg !important;
      background-image: none;

      &::before {
        background-image: url(/@/assets/images/login-bg-dark.svg);
      }
      .aui-inputClear{
        background-color: #232a3b !important;
      }
      .ant-input,
      .ant-input-password {
        background-color: #232a3b !important;
      }

      .ant-btn:not(.ant-btn-link):not(.ant-btn-primary) {
        border: 1px solid #4a5569 !important;
      }

      &-form {
        background: @dark-bg !important;
      }

      .aui-inputClear input,.aui-input-line input,.aui-choice {
        color: #c9d1d9 !important;
      }

      .aui-formBox{
        background-color: @dark-bg !important;
      }
    }

    input.fix-auto-fill,
    .fix-auto-fill input {
      -webkit-text-fill-color: #c9d1d9 !important;
      box-shadow: inherit !important;
    }

    .ant-divider-inner-text {
      font-size: 12px !important;
      color: @text-color-secondary !important;
    }
  }
</style>