refactor: login page

src/api/user.ts

@@ -9,8 +9,3 @@ export const getVerify = () => {
 export const getLogin = (data: object) => {
   return http.request("post", "/login", data);
 };
-
-// 注册
-export const getRegist = (data: object) => {
-  return http.request("post", "/register", data);
-};

src/components/ReInfo/index.vue

@@ -1,232 +0,0 @@
-<script setup lang="ts">
-import { ref, PropType, getCurrentInstance, watch, nextTick, toRef } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { initRouter } from "/@/router";
-import { storageSession } from "/@/utils/storage";
-
-import bgText from "/@/assets/bg-text.png";
-import bgLogo from "/@/assets/bg-logo.png";
-
-export interface ContextProps {
-  userName: string;
-  passWord: string;
-  verify: number | null;
-  svg: any;
-  telephone?: number;
-  dynamicText?: string;
-}
-
-const props = defineProps({
-  ruleForm: {
-    type: Object as PropType<ContextProps>
-  }
-});
-
-const emit = defineEmits<{
-  (e: "onBehavior", evt: Object): void;
-  (e: "refreshVerify"): void;
-}>();
-
-const instance = getCurrentInstance();
-
-const model = toRef(props, "ruleForm");
-let tips = ref<string>("注册");
-let tipsFalse = ref<string>("登录");
-
-const route = useRoute();
-const router = useRouter();
-
-watch(
-  route,
-  async ({ path }): Promise<void> => {
-    await nextTick();
-    path.includes("register")
-      ? (tips.value = "登录") && (tipsFalse.value = "注册")
-      : (tips.value = "注册") && (tipsFalse.value = "登录");
-  },
-  { immediate: true }
-);
-
-const rules = ref<any>({
-  userName: [{ required: true, message: "请输入用户名", trigger: "blur" }],
-  passWord: [
-    { required: true, message: "请输入密码", trigger: "blur" },
-    { min: 6, message: "密码长度必须不小于6位", trigger: "blur" }
-  ],
-  verify: [
-    { required: true, message: "请输入验证码", trigger: "blur" },
-    { type: "number", message: "验证码必须是数字类型", trigger: "blur" }
-  ]
-});
-
-// 点击登录或注册
-const onBehavior = (evt: Object): void => {
-  // @ts-expect-error
-  instance.refs.ruleForm.validate((valid: boolean) => {
-    if (valid) {
-      emit("onBehavior", evt);
-    } else {
-      return false;
-    }
-  });
-};
-
-// 刷新验证码
-const refreshVerify = (): void => {
-  emit("refreshVerify");
-};
-
-// 表单重置
-const resetForm = (): void => {
-  // @ts-expect-error
-  instance.refs.ruleForm.resetFields();
-};
-
-// 登录、注册页面切换
-const changPage = (): void => {
-  tips.value === "注册" ? router.push("/register") : router.push("/login");
-};
-
-const noSecret = (): void => {
-  storageSession.setItem("info", {
-    username: "admin",
-    accessToken: "eyJhbGciOiJIUzUxMiJ9.test"
-  });
-  initRouter("admin").then(() => {});
-  router.push("/");
-};
-</script>
-
-<template>
-  <div>
-    <div style="margin: 20px 0 0 10px">
-      <img :src="bgLogo" width="100" height="80" />
-      <img :src="bgText" width="180" height="30" style="margin-bottom: 6px" />
-    </div>
-    <div class="info">
-      <el-form :model="model" :rules="rules" ref="ruleForm" class="rule-form">
-        <el-form-item prop="userName">
-          <el-input
-            clearable
-            v-model="model.userName"
-            placeholder="请输入用户名"
-            prefix-icon="el-icon-user"
-          ></el-input>
-        </el-form-item>
-        <el-form-item prop="passWord">
-          <el-input
-            clearable
-            type="password"
-            show-password
-            v-model="model.passWord"
-            placeholder="请输入密码"
-            prefix-icon="el-icon-lock"
-          ></el-input>
-        </el-form-item>
-        <el-form-item prop="verify">
-          <el-input
-            maxlength="2"
-            onkeyup="this.value=this.value.replace(/[^\d.]/g,'');"
-            v-model.number="model.verify"
-            placeholder="请输入验证码"
-          ></el-input>
-          <span
-            class="verify"
-            title="刷新"
-            v-html="model.svg"
-            @click.prevent="refreshVerify"
-          ></span>
-        </el-form-item>
-        <el-form-item>
-          <el-button type="primary" @click.prevent="onBehavior">{{
-            tipsFalse
-          }}</el-button>
-          <el-button @click="resetForm">重置</el-button>
-          <span class="tips" @click="changPage">{{ tips }}</span>
-        </el-form-item>
-        <span title="测试用户 直接登录" class="secret" @click="noSecret"
-          >免密登录</span
-        >
-      </el-form>
-    </div>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.info {
-  width: 30vw;
-  height: 41vh;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  background-color: rgba($color: #fff, $alpha: 0.2);
-  background-size: cover;
-  border-radius: 20px;
-  right: 100px;
-  top: 30vh;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media screen and (min-width: 800px) and (max-width: 1200px) {
-    height: 38vh;
-  }
-
-  @media screen and (min-width: 421px) and (max-width: 799px) {
-    width: 45vw;
-    height: 35vh;
-  }
-
-  @media screen and (min-width: 321px) and (max-width: 420px) {
-    width: 80vw;
-    height: 48vh;
-  }
-
-  @media screen and (min-width: 0) and (max-width: 320px) {
-    width: 90vw;
-    height: 55vh;
-  }
-
-  @media screen and (min-height: 600px) and (max-height: 800px) {
-    height: 48vh;
-  }
-
-  @media screen and (min-height: 400px) and (max-height: 599px) {
-    height: 58vh;
-  }
-
-  @media screen and (min-height: 0) and (max-height: 399px) {
-    height: 78vh;
-  }
-
-  .rule-form {
-    width: 80%;
-
-    .verify {
-      position: absolute;
-      margin: -10px 0 0 -120px;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-
-    .tips {
-      color: #000;
-      float: right;
-
-      &:hover {
-        cursor: pointer;
-      }
-    }
-  }
-
-  .secret {
-    color: #fff;
-
-    &:hover {
-      cursor: pointer;
-    }
-  }
-}
-</style>

src/plugins/i18n/config.ts

@@ -92,7 +92,6 @@ export const buttonConfig = {
       hsexitfullscreen: "退出全屏",
       hsrefreshRoute: "刷新路由",
       hslogin: "登陆",
-      hsregister: "注册",
       hsadd: "新增",
       hsmark: "标记/取消",
       hssave: "保存",
@@ -116,7 +115,6 @@ export const buttonConfig = {
       hsexitfullscreen: "exitFullscreen",
       hsrefreshRoute: "refreshRoute",
       hslogin: "login",
-      hsregister: "register",
       hsadd: "Add",
       hsmark: "Mark/Cancel",
       hssave: "Save",

src/router/index.ts

@@ -194,7 +194,7 @@ export function resetRouter() {
 }
 
 // 路由白名单
-const whiteList = ["/login", "/register"];
+const whiteList = ["/login"];
 
 router.beforeEach((to, _from, next) => {
   if (to.meta?.keepAlive) {

src/router/modules/remaining.ts

@@ -11,16 +11,6 @@ const remainingRouter = [
       rank: 101
     }
   },
-  {
-    path: "/register",
-    name: "register",
-    component: () => import("/@/views/register.vue"),
-    meta: {
-      title: "message.hsregister",
-      showLink: false,
-      rank: 102
-    }
-  },
   {
     path: "/redirect",
     name: "redirect",

src/style/index.scss

@@ -65,15 +65,6 @@ ul {
   }
 }
 
-.login,
-.register {
-  width: 100vw;
-  height: 100vh;
-  overflow-x: hidden;
-  background: url("../assets/bg.jpg") no-repeat center;
-  background-size: cover;
-}
-
 /* 头部用户信息样式重置 */
 .hidden {
   display: none !important;

src/views/login.vue

@@ -1,64 +0,0 @@
-<script setup lang="ts">
-import { infoType } from "./type";
-import { useRouter } from "vue-router";
-import { reactive, onBeforeMount } from "vue";
-import { getVerify, getLogin } from "/@/api/user";
-import { storageSession } from "/@/utils/storage";
-import { warnMessage, successMessage } from "/@/utils/message";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-
-const router = useRouter();
-
-// 刷新验证码
-const refreshGetVerify = async () => {
-  let { svg }: infoType = await getVerify();
-  contextInfo.svg = svg;
-};
-
-const contextInfo: ContextProps = reactive({
-  userName: "",
-  passWord: "",
-  verify: null,
-  svg: null
-});
-
-const toPage = (info: Object): void => {
-  storageSession.setItem("info", info);
-  router.push("/");
-};
-
-// 登录
-const onLogin = async () => {
-  let { userName, passWord, verify } = contextInfo;
-  let { code, info, accessToken }: infoType = await getLogin({
-    username: userName,
-    password: passWord,
-    verify: verify
-  });
-  code === 0
-    ? successMessage(info) &&
-      toPage({
-        username: userName,
-        accessToken
-      })
-    : warnMessage(info);
-};
-
-const refreshVerify = (): void => {
-  refreshGetVerify();
-};
-
-onBeforeMount(() => {
-  // refreshGetVerify();
-});
-</script>
-
-<template>
-  <div class="login">
-    <info
-      :ruleForm="contextInfo"
-      @on-behavior="onLogin"
-      @refreshVerify="refreshVerify"
-    />
-  </div>
-</template>

src/views/register.vue

@@ -1,53 +0,0 @@
-<script setup lang="ts">
-import { reactive, onBeforeMount } from "vue";
-import info, { ContextProps } from "../components/ReInfo/index.vue";
-import { getRegist, getVerify } from "/@/api/user";
-import { useRouter } from "vue-router";
-import { warnMessage, successMessage } from "/@/utils/message";
-
-const router = useRouter();
-
-// 刷新验证码
-const refreshGetVerify = async () => {
-  let { svg } = await getVerify();
-  contextInfo.svg = svg;
-};
-
-const contextInfo: ContextProps = reactive({
-  userName: "",
-  passWord: "",
-  verify: null,
-  svg: null
-});
-
-// 注册
-const onRegist = async () => {
-  let { userName, passWord, verify } = contextInfo;
-  let { code, info } = await getRegist({
-    username: userName,
-    password: passWord,
-    verify: verify
-  });
-  code === 0
-    ? successMessage(info) && router.push("/login")
-    : warnMessage(info);
-};
-
-const refreshVerify = (): void => {
-  refreshGetVerify();
-};
-
-onBeforeMount(() => {
-  // refreshGetVerify();
-});
-</script>
-
-<template>
-  <div class="register">
-    <info
-      :ruleForm="contextInfo"
-      @on-behavior="onRegist"
-      @refreshVerify="refreshVerify"
-    />
-  </div>
-</template>