client-admin/src/render/views/Login/index.vue

<template>
  <div class="login h-full flex justify-center items-center">
    <div class="login-base flex">
      <span class="close" @click="willClose">&times;</span>
      <div class="left-bg-box"></div>
      <div class="right-box h-full">
        <IpSet v-if="curStepIndex == 0" @next="toNext"></IpSet>

        <EnvCheck
          v-if="curStepIndex == 1"
          @mounted="checkEnvHandler"
        ></EnvCheck>
        <LoginWays v-if="curStepIndex == 2" @next="toNext"> </LoginWays>
        <AdminLogin v-if="curStepIndex == 3" @to-index="toIndex"> </AdminLogin>
      </div>
    </div>
  </div>
</template>
<script name="Login" lang="ts" setup>
import { ref, onMounted } from "vue";
import { closeApp } from "@/utils";
import EnvCheck from "./EnvCheck.vue";
import IpSet from "./IpSet.vue";
import LoginWays from "./LoginWays.vue";
import AdminLogin from "./AdminLogin.vue";
import { local } from "@/utils/tool";
const curStepIndex = ref(0);
const toNext = () => {
  curStepIndex.value++;
};
const toIndex = (i: number) => {
  curStepIndex.value = i;
};
onMounted(() => {
  if (local.get("baseUrl")) {
    curStepIndex.value++;
  }
});
const envCheckLoading = ref(false);
const checkEnvHandler = () => {
  //todo 环境检测,发起请求
  envCheckLoading.value = true;
  //先定时器模拟请求
  setTimeout(() => {
    envCheckLoading.value = false;
    curStepIndex.value++;

    //todo如果请求异常，则清除本地local里的baseUrl
    //...
  }, 2000);
};
const willClose = () => {
  if (curStepIndex.value == 1 && envCheckLoading.value) {
    window.$confirm({
      title: "系统提示",
      content: "需要重新设置服务器IP吗？",
      onCancel: () => {
        closeApp();
      },
      onOk: () => {
        curStepIndex.value = 0;
        local.remove("baseUrl");
      },
    });
  } else {
    closeApp();
  }
};
</script>
<style lang="less" scoped>
.login {
  height: 100%;
  .close {
    position: absolute;
    z-index: 10;
    right: 28px;
    top: 26px;
    color: #666;
    cursor: pointer;
    font-size: 24px;
    transition: all 0.3s;
    &:hover {
      font-weight: bold;
      color: #333;
    }
  }
  .login-base {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    background: #fff;
    position: relative;
    .right-box {
      width: calc(100% - 360px);
    }
    .left-bg-box {
      width: 360px;
      height: 100%;
      background: url(../../assets//imgs/login_left_bg.png) 0 0 no-repeat;
      background-size: 100% 100%;
    }
  }
}
</style>