perf: 优化登录页面

src/components/ReImageVerify/index.ts

@@ -0,0 +1,7 @@
+import reImageVerify from "./src/index.vue";
+import { withInstall } from "@pureadmin/utils";
+
+/** 图形验证码组件 */
+export const ReImageVerify = withInstall(reImageVerify);
+
+export default ReImageVerify;

src/components/ReImageVerify/src/hooks.ts

@@ -0,0 +1,85 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export const useImageVerify = (width = 120, height = 40) => {
+  const domRef = ref<HTMLCanvasElement>();
+  const imgCode = ref("");
+
+  function setImgCode(code: string) {
+    imgCode.value = code;
+  }
+
+  function getImgCode() {
+    if (!domRef.value) return;
+    imgCode.value = draw(domRef.value, width, height);
+  }
+
+  onMounted(() => {
+    getImgCode();
+  });
+
+  return {
+    domRef,
+    imgCode,
+    setImgCode,
+    getImgCode
+  };
+};
+
+function randomNum(min: number, max: number) {
+  const num = Math.floor(Math.random() * (max - min) + min);
+  return num;
+}
+
+function randomColor(min: number, max: number) {
+  const r = randomNum(min, max);
+  const g = randomNum(min, max);
+  const b = randomNum(min, max);
+  return `rgb(${r},${g},${b})`;
+}
+
+function draw(dom: HTMLCanvasElement, width: number, height: number) {
+  let imgCode = "";
+
+  const NUMBER_STRING = "0123456789";
+
+  const ctx = dom.getContext("2d");
+  if (!ctx) return imgCode;
+
+  ctx.fillStyle = randomColor(180, 230);
+  ctx.fillRect(0, 0, width, height);
+  for (let i = 0; i < 4; i += 1) {
+    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
+    imgCode += text;
+    const fontSize = randomNum(18, 41);
+    const deg = randomNum(-30, 30);
+    ctx.font = `${fontSize}px Simhei`;
+    ctx.textBaseline = "top";
+    ctx.fillStyle = randomColor(80, 150);
+    ctx.save();
+    ctx.translate(30 * i + 15, 15);
+    ctx.rotate((deg * Math.PI) / 180);
+    ctx.fillText(text, -15 + 5, -15);
+    ctx.restore();
+  }
+  for (let i = 0; i < 5; i += 1) {
+    ctx.beginPath();
+    ctx.moveTo(randomNum(0, width), randomNum(0, height));
+    ctx.lineTo(randomNum(0, width), randomNum(0, height));
+    ctx.strokeStyle = randomColor(180, 230);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  for (let i = 0; i < 41; i += 1) {
+    ctx.beginPath();
+    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.fillStyle = randomColor(150, 200);
+    ctx.fill();
+  }
+  return imgCode;
+}

src/components/ReImageVerify/src/index.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { watch } from "vue";
+import { useImageVerify } from "./hooks";
+
+defineOptions({
+  name: "ReImageVerify"
+});
+
+interface Props {
+  code?: string;
+}
+
+interface Emits {
+  (e: "update:code", code: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ""
+});
+
+const emit = defineEmits<Emits>();
+
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue);
+  }
+);
+watch(imgCode, newValue => {
+  emit("update:code", newValue);
+});
+
+defineExpose({ getImgCode });
+</script>
+
+<template>
+  <canvas
+    ref="domRef"
+    width="120"
+    height="40"
+    class="cursor-pointer"
+    @click="getImgCode"
+  />
+</template>

src/components/ReQrcode/index.ts

@@ -0,0 +1,7 @@
+import reQrcode from "./src/index";
+import { withInstall } from "@pureadmin/utils";
+
+/** 二维码组件 */
+export const ReQrcode = withInstall(reQrcode);
+
+export default ReQrcode;

src/components/ReQrcode/src/index.scss

@@ -0,0 +1,9 @@
+.qrcode {
+  &--disabled {
+    background: rgb(255 255 255 / 95%);
+
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}

src/components/ReQrcode/src/index.tsx

@@ -0,0 +1,261 @@
+import {
+  ref,
+  unref,
+  watch,
+  nextTick,
+  computed,
+  type PropType,
+  defineComponent
+} from "vue";
+import "./index.scss";
+import propTypes from "@/utils/propTypes";
+import { isString, cloneDeep } from "@pureadmin/utils";
+import QRCode, { type QRCodeRenderersOptions } from "qrcode";
+import RefreshRight from "@iconify-icons/ep/refresh-right";
+
+interface QrcodeLogo {
+  src?: string;
+  logoSize?: number;
+  bgColor?: string;
+  borderSize?: number;
+  crossOrigin?: string;
+  borderRadius?: number;
+  logoRadius?: number;
+}
+
+const props = {
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string
+    .validate((v: string) => ["canvas", "img"].includes(v))
+    .def("canvas"),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: (): QRCodeRenderersOptions => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: (): QrcodeLogo | string => ""
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def("")
+};
+
+export default defineComponent({
+  name: "ReQrcode",
+  props,
+  emits: ["done", "click", "disabled-click"],
+  setup(props, { emit }) {
+    const { toCanvas, toDataURL } = QRCode;
+    const loading = ref(true);
+    const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null);
+    const renderText = computed(() => String(props.text));
+    const wrapStyle = computed(() => {
+      return {
+        width: props.width + "px",
+        height: props.width + "px"
+      };
+    });
+    const initQrcode = async () => {
+      await nextTick();
+      const options = cloneDeep(props.options || {});
+      if (props.tag === "canvas") {
+        // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+        options.errorCorrectionLevel =
+          options.errorCorrectionLevel ||
+          getErrorCorrectionLevel(unref(renderText));
+        const _width: number = await getOriginWidth(unref(renderText), options);
+        options.scale =
+          props.width === 0 ? undefined : (props.width / _width) * 4;
+        const canvasRef: any = await toCanvas(
+          unref(wrapRef) as HTMLCanvasElement,
+          unref(renderText),
+          options
+        );
+        if (props.logo) {
+          const url = await createLogoCode(canvasRef);
+          emit("done", url);
+          loading.value = false;
+        } else {
+          emit("done", canvasRef.toDataURL());
+          loading.value = false;
+        }
+      } else {
+        const url = await toDataURL(renderText.value, {
+          errorCorrectionLevel: "H",
+          width: props.width,
+          ...options
+        });
+        (unref(wrapRef) as any).src = url;
+        emit("done", url);
+        loading.value = false;
+      }
+    };
+    watch(
+      () => renderText.value,
+      val => {
+        if (!val) return;
+        initQrcode();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+      const canvasWidth = canvasRef.width;
+      const logoOptions: QrcodeLogo = Object.assign(
+        {
+          logoSize: 0.15,
+          bgColor: "#ffffff",
+          borderSize: 0.05,
+          crossOrigin: "anonymous",
+          borderRadius: 8,
+          logoRadius: 0
+        },
+        isString(props.logo) ? {} : props.logo
+      );
+      const {
+        logoSize = 0.15,
+        bgColor = "#ffffff",
+        borderSize = 0.05,
+        crossOrigin = "anonymous",
+        borderRadius = 8,
+        logoRadius = 0
+      } = logoOptions;
+      const logoSrc = isString(props.logo) ? props.logo : props.logo.src;
+      const logoWidth = canvasWidth * logoSize;
+      const logoXY = (canvasWidth * (1 - logoSize)) / 2;
+      const logoBgWidth = canvasWidth * (logoSize + borderSize);
+      const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
+      const ctx = canvasRef.getContext("2d");
+      if (!ctx) return;
+      // logo 底色
+      canvasRoundRect(ctx)(
+        logoBgXY,
+        logoBgXY,
+        logoBgWidth,
+        logoBgWidth,
+        borderRadius
+      );
+      ctx.fillStyle = bgColor;
+      ctx.fill();
+      // logo
+      const image = new Image();
+      if (crossOrigin || logoRadius) {
+        image.setAttribute("crossOrigin", crossOrigin);
+      }
+      (image as any).src = logoSrc;
+      // 使用image绘制可以避免某些跨域情况
+      const drawLogoWithImage = (image: HTMLImageElement) => {
+        ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+      };
+      // 使用canvas绘制以获得更多的功能
+      const drawLogoWithCanvas = (image: HTMLImageElement) => {
+        const canvasImage = document.createElement("canvas");
+        canvasImage.width = logoXY + logoWidth;
+        canvasImage.height = logoXY + logoWidth;
+        const imageCanvas = canvasImage.getContext("2d");
+        if (!imageCanvas || !ctx) return;
+        imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+        canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
+        if (!ctx) return;
+        const fillStyle = ctx.createPattern(canvasImage, "no-repeat");
+        if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fill();
+        }
+      };
+      // 将 logo绘制到 canvas上
+      return new Promise((resolve: any) => {
+        image.onload = () => {
+          logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
+          resolve(canvasRef.toDataURL());
+        };
+      });
+    };
+    // 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+    const getOriginWidth = async (
+      content: string,
+      options: QRCodeRenderersOptions
+    ) => {
+      const _canvas = document.createElement("canvas");
+      await toCanvas(_canvas, content, options);
+      return _canvas.width;
+    };
+    // 对于内容少的QrCode，增大容错率
+    const getErrorCorrectionLevel = (content: string) => {
+      if (content.length > 36) {
+        return "M";
+      } else if (content.length > 16) {
+        return "Q";
+      } else {
+        return "H";
+      }
+    };
+    // 用于绘制圆角
+    const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+      return (x: number, y: number, w: number, h: number, r: number) => {
+        const minSize = Math.min(w, h);
+        if (r > minSize / 2) {
+          r = minSize / 2;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        return ctx;
+      };
+    };
+    const clickCode = () => {
+      emit("click");
+    };
+    const disabledClick = () => {
+      emit("disabled-click");
+    };
+    return () => (
+      <>
+        <div
+          v-loading={unref(loading)}
+          class="qrcode relative inline-block"
+          style={unref(wrapStyle)}
+        >
+          {props.tag === "canvas" ? (
+            <canvas ref={wrapRef} onClick={clickCode}></canvas>
+          ) : (
+            <img ref={wrapRef} onClick={clickCode}></img>
+          )}
+          {props.disabled && (
+            <div
+              class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
+              onClick={disabledClick}
+            >
+              <div class="absolute top-[50%] left-[50%] font-bold">
+                <iconify-icon-offline
+                  class="cursor-pointer"
+                  icon={RefreshRight}
+                  width="30"
+                  color="var(--el-color-primary)"
+                />
+                <div>{props.disabledText}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+});

src/components/ReTypeit/index.ts

@@ -0,0 +1,8 @@
+import typeIt from "./src/index";
+import type { TypeItOptions } from "typeit";
+
+const TypeIt = typeIt;
+
+export { TypeIt, TypeItOptions };
+
+export default TypeIt;

src/components/ReTypeit/src/index.tsx

@@ -0,0 +1,56 @@
+import type { El } from "typeit/dist/types";
+import TypeIt, { type TypeItOptions } from "typeit";
+import { ref, defineComponent, onMounted, type PropType } from "vue";
+
+// 打字机效果组件（配置项详情请查阅 https://www.typeitjs.com/docs/vanilla/usage#options）
+export default defineComponent({
+  name: "TypeIt",
+  props: {
+    options: {
+      type: Object as PropType<TypeItOptions>,
+      default: () => ({}) as TypeItOptions
+    }
+  },
+  setup(props, { slots, expose }) {
+    /**
+     * 输出错误信息
+     * @param message 错误信息
+     */
+    function throwError(message: string) {
+      throw new TypeError(message);
+    }
+
+    /**
+     * 获取浏览器默认语言
+     */
+    function getBrowserLanguage() {
+      return navigator.language;
+    }
+
+    const typedItRef = ref<Element | null>(null);
+
+    onMounted(() => {
+      const $typed = typedItRef.value!.querySelector(".type-it") as El;
+
+      if (!$typed) {
+        const errorMsg =
+          getBrowserLanguage() === "zh-CN"
+            ? "请确保有且只有一个具有class属性为 'type-it' 的元素"
+            : "Please make sure that there is only one element with a Class attribute with 'type-it'";
+        throwError(errorMsg);
+      }
+
+      const typeIt = new TypeIt($typed, props.options).go();
+
+      expose({
+        typeIt
+      });
+    });
+
+    return () => (
+      <div ref={typedItRef}>
+        {slots.default?.() ?? <span class="type-it"></span>}
+      </div>
+    );
+  }
+});

src/store/modules/types.ts

@@ -38,6 +38,8 @@ export type setType = {
 export type userType = {
   username?: string;
   roles?: Array<string>;
+  verifyCode?: string;
+  currentPage?: number;
   isRemembered?: boolean;
   loginDay?: number;
 };

src/store/modules/user.ts

@@ -16,6 +16,10 @@ export const useUserStore = defineStore({
     username: storageLocal().getItem<DataInfo<number>>(userKey)?.username ?? "",
     // 页面级别权限
     roles: storageLocal().getItem<DataInfo<number>>(userKey)?.roles ?? [],
+    // 前端生成的验证码（按实际需求替换）
+    verifyCode: "",
+    // 判断登录页面显示哪个组件（0：登录（默认）、1：手机登录、2：二维码登录、3：注册、4：忘记密码）
+    currentPage: 0,
     // 是否勾选了登录页的免登录
     isRemembered: false,
     // 登录页的免登录存储几天，默认7天
@@ -30,6 +34,14 @@ export const useUserStore = defineStore({
     SET_ROLES(roles: Array<string>) {
       this.roles = roles;
     },
+    /** 存储前端生成的验证码 */
+    SET_VERIFYCODE(verifyCode: string) {
+      this.verifyCode = verifyCode;
+    },
+    /** 存储登录页面显示哪个组件 */
+    SET_CURRENTPAGE(value: number) {
+      this.currentPage = value;
+    },
     /** 存储是否勾选了登录页的免登录 */
     SET_ISREMEMBERED(bool: boolean) {
       this.isRemembered = bool;

src/views/login/components/phone.vue

@@ -0,0 +1,105 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { message } from "@/utils/message";
+import { phoneRules } from "../utils/rule";
+import type { FormInstance } from "element-plus";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useVerifyCode } from "../utils/verifyCode";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Iphone from "@iconify-icons/ep/iphone";
+
+const { t } = useI18n();
+const loading = ref(false);
+const ruleForm = reactive({
+  phone: "",
+  verifyCode: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+
+const onLogin = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 模拟登录请求，需根据实际开发进行修改
+      setTimeout(() => {
+        message(transformI18n($t("login.loginSuccess")), { type: "success" });
+        loading.value = false;
+      }, 2000);
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form ref="ruleFormRef" :model="ruleForm" :rules="phoneRules" size="large">
+    <Motion>
+      <el-form-item prop="phone">
+        <el-input
+          v-model="ruleForm.phone"
+          clearable
+          :placeholder="t('login.phone')"
+          :prefix-icon="useRenderIcon(Iphone)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            v-model="ruleForm.verifyCode"
+            clearable
+            :placeholder="t('login.smsVerifyCode')"
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{
+              text.length > 0
+                ? text + t("login.info")
+                : t("login.getVerifyCode")
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onLogin(ruleFormRef)"
+        >
+          {{ t("login.login") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          {{ t("login.back") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>

src/views/login/components/qrCode.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import Motion from "../utils/motion";
+import ReQrcode from "@/components/ReQrcode";
+import { useUserStoreHook } from "@/store/modules/user";
+
+const { t } = useI18n();
+</script>
+
+<template>
+  <Motion class="-mt-2 -mb-2"> <ReQrcode :text="t('login.test')" /> </Motion>
+  <Motion :delay="100">
+    <el-divider>
+      <p class="text-gray-500 text-xs">{{ t("login.tip") }}</p>
+    </el-divider>
+  </Motion>
+  <Motion :delay="150">
+    <el-button
+      class="w-full mt-4"
+      @click="useUserStoreHook().SET_CURRENTPAGE(0)"
+    >
+      {{ t("login.back") }}
+    </el-button>
+  </Motion>
+</template>

src/views/login/components/regist.vue

@@ -0,0 +1,192 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { message } from "@/utils/message";
+import { updateRules } from "../utils/rule";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
+import User from "@iconify-icons/ri/user-3-fill";
+
+const { t } = useI18n();
+const checked = ref(false);
+const loading = ref(false);
+const ruleForm = reactive({
+  username: "",
+  phone: "",
+  verifyCode: "",
+  password: "",
+  repeatPassword: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+const repeatPasswordRule = [
+  {
+    validator: (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error(transformI18n($t("login.passwordSureReg"))));
+      } else if (ruleForm.password !== value) {
+        callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
+      } else {
+        callback();
+      }
+    },
+    trigger: "blur"
+  }
+];
+
+const onUpdate = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (checked.value) {
+        // 模拟请求，需根据实际开发进行修改
+        setTimeout(() => {
+          message(transformI18n($t("login.registerSuccess")), {
+            type: "success"
+          });
+          loading.value = false;
+        }, 2000);
+      } else {
+        loading.value = false;
+        message(transformI18n($t("login.tickPrivacy")), { type: "warning" });
+      }
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="updateRules"
+    size="large"
+  >
+    <Motion>
+      <el-form-item
+        :rules="[
+          {
+            required: true,
+            message: transformI18n($t('login.usernameReg')),
+            trigger: 'blur'
+          }
+        ]"
+        prop="username"
+      >
+        <el-input
+          v-model="ruleForm.username"
+          clearable
+          :placeholder="t('login.username')"
+          :prefix-icon="useRenderIcon(User)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="phone">
+        <el-input
+          v-model="ruleForm.phone"
+          clearable
+          :placeholder="t('login.phone')"
+          :prefix-icon="useRenderIcon(Iphone)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            v-model="ruleForm.verifyCode"
+            clearable
+            :placeholder="t('login.smsVerifyCode')"
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{
+              text.length > 0
+                ? text + t("login.info")
+                : t("login.getVerifyCode")
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item prop="password">
+        <el-input
+          v-model="ruleForm.password"
+          clearable
+          show-password
+          :placeholder="t('login.password')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="250">
+      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
+        <el-input
+          v-model="ruleForm.repeatPassword"
+          clearable
+          show-password
+          :placeholder="t('login.sure')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="300">
+      <el-form-item>
+        <el-checkbox v-model="checked">
+          {{ t("login.readAccept") }}
+        </el-checkbox>
+        <el-button link type="primary">
+          {{ t("login.privacyPolicy") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="350">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onUpdate(ruleFormRef)"
+        >
+          {{ t("login.definite") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="400">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          {{ t("login.back") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>

src/views/login/components/update.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { useI18n } from "vue-i18n";
+import { ref, reactive } from "vue";
+import Motion from "../utils/motion";
+import { message } from "@/utils/message";
+import { updateRules } from "../utils/rule";
+import type { FormInstance } from "element-plus";
+import { useVerifyCode } from "../utils/verifyCode";
+import { $t, transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
+import { useRenderIcon } from "@/components/ReIcon/src/hooks";
+import Lock from "@iconify-icons/ri/lock-fill";
+import Iphone from "@iconify-icons/ep/iphone";
+
+const { t } = useI18n();
+const loading = ref(false);
+const ruleForm = reactive({
+  phone: "",
+  verifyCode: "",
+  password: "",
+  repeatPassword: ""
+});
+const ruleFormRef = ref<FormInstance>();
+const { isDisabled, text } = useVerifyCode();
+const repeatPasswordRule = [
+  {
+    validator: (rule, value, callback) => {
+      if (value === "") {
+        callback(new Error(transformI18n($t("login.passwordSureReg"))));
+      } else if (ruleForm.password !== value) {
+        callback(new Error(transformI18n($t("login.passwordDifferentReg"))));
+      } else {
+        callback();
+      }
+    },
+    trigger: "blur"
+  }
+];
+
+const onUpdate = async (formEl: FormInstance | undefined) => {
+  loading.value = true;
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      // 模拟请求，需根据实际开发进行修改
+      setTimeout(() => {
+        message(transformI18n($t("login.passwordUpdateReg")), {
+          type: "success"
+        });
+        loading.value = false;
+      }, 2000);
+    } else {
+      loading.value = false;
+      return fields;
+    }
+  });
+};
+
+function onBack() {
+  useVerifyCode().end();
+  useUserStoreHook().SET_CURRENTPAGE(0);
+}
+</script>
+
+<template>
+  <el-form
+    ref="ruleFormRef"
+    :model="ruleForm"
+    :rules="updateRules"
+    size="large"
+  >
+    <Motion>
+      <el-form-item prop="phone">
+        <el-input
+          v-model="ruleForm.phone"
+          clearable
+          :placeholder="t('login.phone')"
+          :prefix-icon="useRenderIcon(Iphone)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="100">
+      <el-form-item prop="verifyCode">
+        <div class="w-full flex justify-between">
+          <el-input
+            v-model="ruleForm.verifyCode"
+            clearable
+            :placeholder="t('login.smsVerifyCode')"
+            :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+          />
+          <el-button
+            :disabled="isDisabled"
+            class="ml-2"
+            @click="useVerifyCode().start(ruleFormRef, 'phone')"
+          >
+            {{
+              text.length > 0
+                ? text + t("login.info")
+                : t("login.getVerifyCode")
+            }}
+          </el-button>
+        </div>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="150">
+      <el-form-item prop="password">
+        <el-input
+          v-model="ruleForm.password"
+          clearable
+          show-password
+          :placeholder="t('login.password')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="200">
+      <el-form-item :rules="repeatPasswordRule" prop="repeatPassword">
+        <el-input
+          v-model="ruleForm.repeatPassword"
+          clearable
+          show-password
+          :placeholder="t('login.sure')"
+          :prefix-icon="useRenderIcon(Lock)"
+        />
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="250">
+      <el-form-item>
+        <el-button
+          class="w-full"
+          size="default"
+          type="primary"
+          :loading="loading"
+          @click="onUpdate(ruleFormRef)"
+        >
+          {{ t("login.definite") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+
+    <Motion :delay="300">
+      <el-form-item>
+        <el-button class="w-full" size="default" @click="onBack">
+          {{ t("login.back") }}
+        </el-button>
+      </el-form-item>
+    </Motion>
+  </el-form>
+</template>

src/views/login/index.vue

@@ -4,15 +4,24 @@ import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
 import { message } from "@/utils/message";
 import { loginRules } from "./utils/rule";
+import phone from "./components/phone.vue";
+import TypeIt from "@/components/ReTypeit";
+import { debounce } from "@pureadmin/utils";
+import qrCode from "./components/qrCode.vue";
+import regist from "./components/regist.vue";
+import update from "./components/update.vue";
 import { useNav } from "@/layout/hooks/useNav";
+import { useEventListener } from "@vueuse/core";
 import type { FormInstance } from "element-plus";
 import { $t, transformI18n } from "@/plugins/i18n";
+import { operates, thirdParty } from "./utils/enums";
 import { useLayout } from "@/layout/hooks/useLayout";
 import { useUserStoreHook } from "@/store/modules/user";
 import { initRouter, getTopMenu } from "@/router/utils";
 import { bg, avatar, illustration } from "./utils/static";
+import { ReImageVerify } from "@/components/ReImageVerify";
+import { ref, toRaw, reactive, watch, computed } from "vue";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { ref, reactive, toRaw, onMounted, onBeforeUnmount } from "vue";
 import { useTranslationLang } from "@/layout/hooks/useTranslationLang";
 import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange";
 
@@ -22,64 +31,84 @@ import globalization from "@/assets/svg/globalization.svg?component";
 import Lock from "@iconify-icons/ri/lock-fill";
 import Check from "@iconify-icons/ep/check";
 import User from "@iconify-icons/ri/user-3-fill";
+import Info from "@iconify-icons/ri/information-line";
 
 defineOptions({
   name: "Login"
 });
+
+const imgCode = ref("");
+const loginDay = ref(7);
 const router = useRouter();
 const loading = ref(false);
+const checked = ref(false);
+const disabled = ref(false);
 const ruleFormRef = ref<FormInstance>();
-
-const { initStorage } = useLayout();
-initStorage();
+const currentPage = computed(() => {
+  return useUserStoreHook().currentPage;
+});
 
 const { t } = useI18n();
-const { dataTheme, dataThemeChange } = useDataThemeChange();
-dataThemeChange();
+const { initStorage } = useLayout();
+initStorage();
+const { dataTheme, overallStyle, dataThemeChange } = useDataThemeChange();
+dataThemeChange(overallStyle.value);
 const { title, getDropdownItemStyle, getDropdownItemClass } = useNav();
 const { locale, translationCh, translationEn } = useTranslationLang();
 
 const ruleForm = reactive({
   username: "admin",
-  password: "admin123"
+  password: "admin123",
+  verifyCode: ""
 });
 
 const onLogin = async (formEl: FormInstance | undefined) => {
-  loading.value = true;
   if (!formEl) return;
   await formEl.validate((valid, fields) => {
     if (valid) {
+      loading.value = true;
       useUserStoreHook()
         .loginByUsername({ username: ruleForm.username, password: "admin123" })
         .then(res => {
           if (res.success) {
             // 获取后端路由
-            initRouter().then(() => {
-              router.push(getTopMenu(true).path);
-              message("登录成功", { type: "success" });
+            return initRouter().then(() => {
+              disabled.value = true;
+              router
+                .push(getTopMenu(true).path)
+                .then(() => {
+                  message("登录成功", { type: "success" });
+                })
+                .finally(() => (disabled.value = false));
             });
           }
-        });
+        })
+        .finally(() => (loading.value = false));
     } else {
-      loading.value = false;
       return fields;
     }
   });
 };
 
-/** 使用公共函数，避免`removeEventListener`失效 */
-function onkeypress({ code }: KeyboardEvent) {
-  if (code === "Enter") {
-    onLogin(ruleFormRef.value);
-  }
-}
+const immediateDebounce: any = debounce(
+  formRef => onLogin(formRef),
+  1000,
+  true
+);
 
-onMounted(() => {
-  window.document.addEventListener("keypress", onkeypress);
+useEventListener(document, "keypress", ({ code }) => {
+  if (code === "Enter" && !disabled.value && !loading.value)
+    immediateDebounce(ruleFormRef.value);
 });
 
-onBeforeUnmount(() => {
-  window.document.removeEventListener("keypress", onkeypress);
+watch(imgCode, value => {
+  useUserStoreHook().SET_VERIFYCODE(value);
+});
+watch(checked, bool => {
+  useUserStoreHook().SET_ISREMEMBERED(bool);
+});
+watch(loginDay, value => {
+  useUserStoreHook().SET_LOGINDAY(value);
 });
 </script>
 
@@ -136,10 +165,15 @@ onBeforeUnmount(() => {
         <div class="login-form">
           <avatar class="avatar" />
           <Motion>
-            <h2 class="outline-none">{{ title }}</h2>
+            <h2 class="outline-none">
+              <TypeIt
+                :options="{ strings: [title], cursor: false, speed: 100 }"
+              />
+            </h2>
           </Motion>
 
           <el-form
+            v-if="currentPage === 0"
             ref="ruleFormRef"
             :model="ruleForm"
             :rules="loginRules"
@@ -177,21 +211,130 @@ onBeforeUnmount(() => {
               </el-form-item>
             </Motion>
 
+            <Motion :delay="200">
+              <el-form-item prop="verifyCode">
+                <el-input
+                  v-model="ruleForm.verifyCode"
+                  clearable
+                  :placeholder="t('login.verifyCode')"
+                  :prefix-icon="useRenderIcon('ri:shield-keyhole-line')"
+                >
+                  <template v-slot:append>
+                    <ReImageVerify v-model:code="imgCode" />
+                  </template>
+                </el-input>
+              </el-form-item>
+            </Motion>
+
             <Motion :delay="250">
-              <el-button
-                class="w-full mt-4"
-                size="default"
-                type="primary"
-                :loading="loading"
-                @click="onLogin(ruleFormRef)"
-              >
-                {{ t("login.login") }}
-              </el-button>
+              <el-form-item>
+                <div class="w-full h-[20px] flex justify-between items-center">
+                  <el-checkbox v-model="checked">
+                    <span class="flex">
+                      <select
+                        v-model="loginDay"
+                        :style="{
+                          width: loginDay < 10 ? '10px' : '16px',
+                          outline: 'none',
+                          background: 'none',
+                          appearance: 'none'
+                        }"
+                      >
+                        <option value="1">1</option>
+                        <option value="7">7</option>
+                        <option value="30">30</option>
+                      </select>
+                      {{ t("login.remember") }}
+                      <el-tooltip
+                        effect="dark"
+                        placement="top"
+                        :content="t('login.rememberInfo')"
+                      >
+                        <IconifyIconOffline :icon="Info" class="ml-1" />
+                      </el-tooltip>
+                    </span>
+                  </el-checkbox>
+                  <el-button
+                    link
+                    type="primary"
+                    @click="useUserStoreHook().SET_CURRENTPAGE(4)"
+                  >
+                    {{ t("login.forget") }}
+                  </el-button>
+                </div>
+                <el-button
+                  class="w-full mt-4"
+                  size="default"
+                  type="primary"
+                  :loading="loading"
+                  :disabled="disabled"
+                  @click="onLogin(ruleFormRef)"
+                >
+                  {{ t("login.login") }}
+                </el-button>
+              </el-form-item>
+            </Motion>
+
+            <Motion :delay="300">
+              <el-form-item>
+                <div class="w-full h-[20px] flex justify-between items-center">
+                  <el-button
+                    v-for="(item, index) in operates"
+                    :key="index"
+                    class="w-full mt-4"
+                    size="default"
+                    @click="useUserStoreHook().SET_CURRENTPAGE(index + 1)"
+                  >
+                    {{ t(item.title) }}
+                  </el-button>
+                </div>
+              </el-form-item>
             </Motion>
           </el-form>
+
+          <Motion v-if="currentPage === 0" :delay="350">
+            <el-form-item>
+              <el-divider>
+                <p class="text-gray-500 text-xs">{{ t("login.thirdLogin") }}</p>
+              </el-divider>
+              <div class="w-full flex justify-evenly">
+                <span
+                  v-for="(item, index) in thirdParty"
+                  :key="index"
+                  :title="t(item.title)"
+                >
+                  <IconifyIconOnline
+                    :icon="`ri:${item.icon}-fill`"
+                    width="20"
+                    class="cursor-pointer text-gray-500 hover:text-blue-400"
+                  />
+                </span>
+              </div>
+            </el-form-item>
+          </Motion>
+          <!-- 手机号登录 -->
+          <phone v-if="currentPage === 1" />
+          <!-- 二维码登录 -->
+          <qrCode v-if="currentPage === 2" />
+          <!-- 注册 -->
+          <regist v-if="currentPage === 3" />
+          <!-- 忘记密码 -->
+          <update v-if="currentPage === 4" />
         </div>
       </div>
     </div>
+    <div
+      class="w-full flex-c absolute bottom-3 text-sm text-[rgba(0,0,0,0.6)] dark:text-[rgba(220,220,242,0.8)]"
+    >
+      Copyright © 2020-present
+      <a
+        class="hover:text-primary"
+        href="https://github.com/pure-admin"
+        target="_blank"
+      >
+        &nbsp;{{ title }}
+      </a>
+    </div>
   </div>
 </template>
 

src/views/login/utils/enums.ts

@@ -0,0 +1,34 @@
+import { $t } from "@/plugins/i18n";
+
+const operates = [
+  {
+    title: $t("login.phoneLogin")
+  },
+  {
+    title: $t("login.qRCodeLogin")
+  },
+  {
+    title: $t("login.register")
+  }
+];
+
+const thirdParty = [
+  {
+    title: $t("login.weChatLogin"),
+    icon: "wechat"
+  },
+  {
+    title: $t("login.alipayLogin"),
+    icon: "alipay"
+  },
+  {
+    title: $t("login.qqLogin"),
+    icon: "qq"
+  },
+  {
+    title: $t("login.weiboLogin"),
+    icon: "weibo"
+  }
+];
+
+export { operates, thirdParty };

src/views/login/utils/rule.ts

@@ -1,13 +1,110 @@
 import { reactive } from "vue";
+import { isPhone } from "@pureadmin/utils";
 import type { FormRules } from "element-plus";
 import { $t, transformI18n } from "@/plugins/i18n";
+import { useUserStoreHook } from "@/store/modules/user";
+
+/** 6位数字验证码正则 */
+export const REGEXP_SIX = /^\d{6}$/;
 
 /** 密码正则（密码格式应为8-18位数字、字母、符号的任意两种组合） */
 export const REGEXP_PWD =
   /^(?![0-9]+$)(?![a-z]+$)(?![A-Z]+$)(?!([^(0-9a-zA-Z)]|[()])+$)(?!^.*[\u4E00-\u9FA5].*$)([^(0-9a-zA-Z)]|[()]|[a-z]|[A-Z]|[0-9]){8,18}$/;
 
 /** 登录校验 */
-const loginRules = reactive(<FormRules>{
+const loginRules = reactive<FormRules>({
+  password: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.passwordReg"))));
+        } else if (!REGEXP_PWD.test(value)) {
+          callback(new Error(transformI18n($t("login.passwordRuleReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.verifyCodeReg"))));
+        } else if (useUserStoreHook().verifyCode !== value) {
+          callback(new Error(transformI18n($t("login.verifyCodeCorrectReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+/** 手机登录校验 */
+const phoneRules = reactive<FormRules>({
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.phoneReg"))));
+        } else if (!isPhone(value)) {
+          callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.verifyCodeReg"))));
+        } else if (!REGEXP_SIX.test(value)) {
+          callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ]
+});
+
+/** 忘记密码校验 */
+const updateRules = reactive<FormRules>({
+  phone: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.phoneReg"))));
+        } else if (!isPhone(value)) {
+          callback(new Error(transformI18n($t("login.phoneCorrectReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
+  verifyCode: [
+    {
+      validator: (rule, value, callback) => {
+        if (value === "") {
+          callback(new Error(transformI18n($t("login.verifyCodeReg"))));
+        } else if (!REGEXP_SIX.test(value)) {
+          callback(new Error(transformI18n($t("login.verifyCodeSixReg"))));
+        } else {
+          callback();
+        }
+      },
+      trigger: "blur"
+    }
+  ],
   password: [
     {
       validator: (rule, value, callback) => {
@@ -24,4 +121,4 @@ const loginRules = reactive(<FormRules>{
   ]
 });
 
-export { loginRules };
+export { loginRules, phoneRules, updateRules };

src/views/login/utils/verifyCode.ts

@@ -0,0 +1,50 @@
+import type { FormInstance, FormItemProp } from "element-plus";
+import { clone } from "@pureadmin/utils";
+import { ref } from "vue";
+
+const isDisabled = ref(false);
+const timer = ref(null);
+const text = ref("");
+
+export const useVerifyCode = () => {
+  const start = async (
+    formEl: FormInstance | undefined,
+    props: FormItemProp,
+    time = 60
+  ) => {
+    if (!formEl) return;
+    const initTime = clone(time, true);
+    await formEl.validateField(props, isValid => {
+      if (isValid) {
+        clearInterval(timer.value);
+        isDisabled.value = true;
+        text.value = `${time}`;
+        timer.value = setInterval(() => {
+          if (time > 0) {
+            time -= 1;
+            text.value = `${time}`;
+          } else {
+            text.value = "";
+            isDisabled.value = false;
+            clearInterval(timer.value);
+            time = initTime;
+          }
+        }, 1000);
+      }
+    });
+  };
+
+  const end = () => {
+    text.value = "";
+    isDisabled.value = false;
+    clearInterval(timer.value);
+  };
+
+  return {
+    isDisabled,
+    timer,
+    text,
+    start,
+    end
+  };
+};