chore: join

src/views/system/ssoLogin/klab/index.vue

@@ -0,0 +1,270 @@
+<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>
+    <header class="aui-title text-white text-center">KLAB系统</header>
+    <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="loginHandleClick"
+                >
+                  <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="loginHandleClick"
+                  >{{ 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, toRaw } 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('mini-login');
+  const { notification, createMessage } = useMessage();
+  const userStore = useUserStore();
+  const { t } = useI18n();
+  const localeStore = useLocaleStore();
+  const showLocale = localeStore.getShowPicker;
+
+  // 账号登录表单字段
+  const formData = reactive<any>({
+    realKey: '',
+    inputCode: '',
+    username: '',
+    password: '',
+  });
+  // 手机登录表单字段
+  const phoneFormData = reactive<any>({
+    mobile: '',
+    smscode: '',
+  });
+  const loginRef = ref();
+  const loginLoading = ref<boolean>(false);
+  const { getIsMobile } = useAppInject();
+
+  async function loginHandleClick() {
+      await accountLogin();
+  }
+
+  async function accountLogin() {
+    if (!formData.username) {
+      createMessage.warn(t('sys.login.accountPlaceholder'));
+      return;
+    }
+    if (!formData.password) {
+      createMessage.warn(t('sys.login.passwordPlaceholder'));
+      return;
+    }
+    if (!formData.inputCode) {
+      createMessage.warn(t('sys.login.smsPlaceholder'));
+      return;
+    }
+    try {
+      loginLoading.value = true;
+      const userInfo = await userStore.login(toRaw({
+          password: formData.password,
+          username: formData.username,
+          realKey: formData.realKey,
+          code: formData.inputCode,
+        }));
+      if (userInfo) {
+        notification.success({
+          message: t('sys.login.loginSuccessTitle'),
+          description: `${t('sys.login.loginSuccessDesc')}: ${userInfo.nickName}`,
+          duration: 3,
+        });
+      }
+    } catch (error){
+      formData.code='';
+      formData.realKey='';
+    } finally {
+      loginLoading.value = false;
+    }
+  }
+
+</script>
+
+<style lang="less" scoped>
+  @import '/@/assets/loginmini/style/home.less';
+  @import '/@/assets/loginmini/style/base.less';
+
+  .login-background-img {
+    background-image: url(/@/assets/ssoLogin/kics/icon/login_bg.jpg);
+  }
+
+  :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-title {
+    position: fixed;
+    top: 24%;
+    width: 100%;
+    font-size: 28px;
+    font-weight: bold;
+    line-height: 1.1;
+    user-select: none;
+  }
+
+  .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}-mini-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>