chore: 简化登录页

locales/en.yaml

@@ -33,40 +33,7 @@ status:
 login:
   username: Username
   password: Password
-  verifyCode: VerifyCode
-  remember: Remember Password
-  sure: Sure Password
-  forget: Forget Password?
   login: Login
-  thirdLogin: Third Login
-  phoneLogin: Phone Login
-  qRCodeLogin: QRCode Login
-  register: Register
-  weChatLogin: WeChat Login
-  alipayLogin: Alipay Login
-  qqLogin: QQ Login
-  weiboLogin: Weibo Login
-  phone: Phone
-  smsVerifyCode: SMS VerifyCode
-  back: Back
-  test: Mock Test
-  tip: After scanning the code, click "Confirm" to complete the login
-  definite: Definite
-  loginSuccess: Login Success
-  registerSuccess: Regist Success
-  tickPrivacy: Please tick Privacy Policy
-  readAccept: I have read it carefully and accept
-  privacyPolicy: Privacy Policy
-  getVerifyCode: Get VerifyCode
-  info: Seconds
   usernameReg: Please enter username
   passwordReg: Please enter password
-  verifyCodeReg: Please enter verify code
-  verifyCodeCorrectReg: Please enter correct verify code
-  verifyCodeSixReg: Please enter a 6-digit verify code
-  phoneReg: Please enter the phone
-  phoneCorrectReg: Please enter the correct phone number format
   passwordRuleReg: The password format should be any combination of 8-18 digits
-  passwordSureReg: Please enter confirm password
-  passwordDifferentReg: The two passwords do not match!
-  passwordUpdateReg: Password has been updated

locales/zh-CN.yaml

@@ -33,40 +33,7 @@ status:
 login:
   username: 账号
   password: 密码
-  verifyCode: 验证码
-  remember: 记住密码
-  sure: 确认密码
-  forget: 忘记密码?
   login: 登录
-  thirdLogin: 第三方登录
-  phoneLogin: 手机登录
-  qRCodeLogin: 二维码登录
-  register: 注册
-  weChatLogin: 微信登录
-  alipayLogin: 支付宝登录
-  qqLogin: QQ登录
-  weiboLogin: 微博登录
-  phone: 手机号码
-  smsVerifyCode: 短信验证码
-  back: 返回
-  test: 模拟测试
-  tip: 扫码后点击"确认"，即可完成登录
-  definite: 确定
-  loginSuccess: 登录成功
-  registerSuccess: 注册成功
-  tickPrivacy: 请勾选隐私政策
-  readAccept: 我已仔细阅读并接受
-  privacyPolicy: 《隐私政策》
-  getVerifyCode: 获取验证码
-  info: 秒后重新获取
   usernameReg: 请输入账号
   passwordReg: 请输入密码
-  verifyCodeReg: 请输入验证码
-  verifyCodeCorrectReg: 请输入正确的验证码
-  verifyCodeSixReg: 请输入6位数字验证码
-  phoneReg: 请输入手机号码
-  phoneCorrectReg: 请输入正确的手机号码格式
   passwordRuleReg: 密码格式应为8-18位数字、字母、符号的任意两种组合
-  passwordSureReg: 请输入确认密码
-  passwordDifferentReg: 两次密码不一致!
-  passwordUpdateReg: 修改密码成功

package.json

@@ -51,11 +51,9 @@
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
     "pinia": "^2.0.21",
-    "qrcode": "^1.5.1",
     "qs": "^6.11.0",
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^2.1.0",
-    "rgb-hex": "^4.0.0",
     "vue": "^3.2.38",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.5",

pnpm-lock.yaml

@@ -64,11 +64,9 @@ specifiers:
   postcss-scss: ^4.0.4
   prettier: ^2.5.1
   pretty-quick: 3.1.1
-  qrcode: ^1.5.1
   qs: ^6.11.0
   resize-observer-polyfill: ^1.5.1
   responsive-storage: ^2.1.0
-  rgb-hex: ^4.0.0
   rimraf: 3.0.2
   rollup-plugin-visualizer: ^5.8.1
   sass: ^1.53.0
@@ -120,11 +118,9 @@ dependencies:
   nprogress: 0.2.0
   path: 0.12.7
   pinia: 2.0[email protected][email protected]
-  qrcode: 1.5.1
   qs: 6.11.0
   resize-observer-polyfill: 1.5.1
   responsive-storage: 2.1.0
-  rgb-hex: 4.0.0
   vue: 3.2.38
   vue-i18n: 9.2[email protected]
   vue-router: 4.1[email protected]
@@ -2167,6 +2163,7 @@ packages:
         integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
       }
     engines: { node: ">=8" }
+    dev: true
 
   /ansi-styles/3.2.1:
     resolution:
@@ -2186,6 +2183,7 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       color-convert: 2.0.1
+    dev: true
 
   /anymatch/3.1.2:
     resolution:
@@ -2445,6 +2443,7 @@ packages:
         integrity: sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
       }
     engines: { node: ">=6" }
+    dev: true
 
   /camelcase/6.3.0:
     resolution:
@@ -2554,17 +2553,6 @@ packages:
       string-width: 4.2.3
     dev: true
 
-  /cliui/6.0.0:
-    resolution:
-      {
-        integrity: sha512-t6wbgtoCXvAzst7QgXxJYqPt0usEfbgQdftEPbLL/cvv6HPE5VgvqCuAIDR0NgU52ds6rFwqrgakNLrHEjCbrQ==
-      }
-    dependencies:
-      string-width: 4.2.3
-      strip-ansi: 6.0.1
-      wrap-ansi: 6.2.0
-    dev: false
-
   /cliui/7.0.4:
     resolution:
       {
@@ -2601,6 +2589,7 @@ packages:
     engines: { node: ">=7.0.0" }
     dependencies:
       color-name: 1.1.4
+    dev: true
 
   /color-name/1.1.3:
     resolution:
@@ -2614,6 +2603,7 @@ packages:
       {
         integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
       }
+    dev: true
 
   /color-string/1.9.1:
     resolution:
@@ -3035,6 +3025,7 @@ packages:
         integrity: sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==
       }
     engines: { node: ">=0.10.0" }
+    dev: true
 
   /deep-is/0.1.4:
     resolution:
@@ -3102,13 +3093,6 @@ packages:
     engines: { node: ">=0.3.1" }
     dev: true
 
-  /dijkstrajs/1.0.2:
-    resolution:
-      {
-        integrity: sha512-QV6PMaHTCNmKSeP6QoXhVTw9snc9VD8MulTT0Bd99Pacp4SS1cjcrYPgBPmibqKVtMJJfqC6XvOXgPMEEPH/fg==
-      }
-    dev: false
-
   /dir-glob/3.0.1:
     resolution:
       {
@@ -3283,13 +3267,7 @@ packages:
       {
         integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==
       }
-
-  /encode-utf8/1.0.3:
-    resolution:
-      {
-        integrity: sha512-ucAnuBEhUK4boH2HjVYG5Q2mQyPorvv0u/ocS+zhdw0S8AlHYY+GOFhP1Gio5z4icpP2ivFSvhtFjQi8+T9ppw==
-      }
-    dev: false
+    dev: true
 
   /encodeurl/1.0.2:
     resolution:
@@ -4067,6 +4045,7 @@ packages:
     dependencies:
       locate-path: 5.0.0
       path-exists: 4.0.0
+    dev: true
 
   /find-up/5.0.0:
     resolution:
@@ -4203,6 +4182,7 @@ packages:
         integrity: sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
       }
     engines: { node: 6.* || 8.* || >= 10.* }
+    dev: true
 
   /get-intrinsic/1.1.2:
     resolution:
@@ -4632,6 +4612,7 @@ packages:
         integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==
       }
     engines: { node: ">=8" }
+    dev: true
 
   /is-glob/4.0.3:
     resolution:
@@ -4956,6 +4937,7 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       p-locate: 4.1.0
+    dev: true
 
   /locate-path/6.0.0:
     resolution:
@@ -5498,6 +5480,7 @@ packages:
     engines: { node: ">=6" }
     dependencies:
       p-try: 2.2.0
+    dev: true
 
   /p-limit/3.1.0:
     resolution:
@@ -5517,6 +5500,7 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       p-limit: 2.3.0
+    dev: true
 
   /p-locate/5.0.0:
     resolution:
@@ -5544,6 +5528,7 @@ packages:
         integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==
       }
     engines: { node: ">=6" }
+    dev: true
 
   /parent-module/1.0.1:
     resolution:
@@ -5582,6 +5567,7 @@ packages:
         integrity: sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
       }
     engines: { node: ">=8" }
+    dev: true
 
   /path-is-absolute/1.0.1:
     resolution:
@@ -5683,14 +5669,6 @@ packages:
       semver-compare: 1.0.0
     dev: true
 
-  /pngjs/5.0.0:
-    resolution:
-      {
-        integrity: sha512-40QW5YalBNfQo5yRYmiw7Yz6TKKVr3h6970B2YE+3fQpsWcrbj1PzJgxeJ19DRQjhMbKPIuMY8rFaXc8moolVw==
-      }
-    engines: { node: ">=10.13.0" }
-    dev: false
-
   /popmotion/11.0.5:
     resolution:
       {
@@ -6313,20 +6291,6 @@ packages:
     engines: { node: ">=0.6.0", teleport: ">=0.2.0" }
     dev: true
 
-  /qrcode/1.5.1:
-    resolution:
-      {
-        integrity: sha512-nS8NJ1Z3md8uTjKtP+SGGhfqmTCs5flU/xR623oI0JX+Wepz9R8UrRVCTBTJm3qGw3rH6jJ6MUHjkDx15cxSSg==
-      }
-    engines: { node: ">=10.13.0" }
-    hasBin: true
-    dependencies:
-      dijkstrajs: 1.0.2
-      encode-utf8: 1.0.3
-      pngjs: 5.0.0
-      yargs: 15.4.1
-    dev: false
-
   /qs/6.11.0:
     resolution:
       {
@@ -6448,6 +6412,7 @@ packages:
         integrity: sha512-fGxEI7+wsG9xrvdjsrlmL22OMTTiHRwAMroiEeMgq8gzoLC/PQr7RsRDSTLUg/bZAZtF+TVIkHc6/4RIKrui+Q==
       }
     engines: { node: ">=0.10.0" }
+    dev: true
 
   /require-from-string/2.0.2:
     resolution:
@@ -6457,13 +6422,6 @@ packages:
     engines: { node: ">=0.10.0" }
     dev: true
 
-  /require-main-filename/2.0.0:
-    resolution:
-      {
-        integrity: sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==
-      }
-    dev: false
-
   /resize-observer-polyfill/1.5.1:
     resolution:
       {
@@ -6542,14 +6500,6 @@ packages:
       }
     dev: true
 
-  /rgb-hex/4.0.0:
-    resolution:
-      {
-        integrity: sha512-Eg2ev5CiMBnQ9Gpflmqbwbso0CCdISqtVIow7OpYSLN1ULUv2jTB9YieS1DSSn/17AD7KkPWDPzSFzI4GSuu/Q==
-      }
-    engines: { node: ">=12" }
-    dev: false
-
   /rimraf/3.0.2:
     resolution:
       {
@@ -6709,13 +6659,6 @@ packages:
       lru-cache: 6.0.0
     dev: true
 
-  /set-blocking/2.0.0:
-    resolution:
-      {
-        integrity: sha512-KiKBS8AnWGEyLzofFfmvKwpdPzqiy16LvQfK3yv/fVH7Bj13/wl3JSR1J+rfgRE9q7xUJK4qvgS8raSOeLUehw==
-      }
-    dev: false
-
   /shebang-command/2.0.0:
     resolution:
       {
@@ -6915,6 +6858,7 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
+    dev: true
 
   /string_decoder/1.3.0:
     resolution:
@@ -6945,6 +6889,7 @@ packages:
     engines: { node: ">=8" }
     dependencies:
       ansi-regex: 5.0.1
+    dev: true
 
   /strip-final-newline/2.0.0:
     resolution:
@@ -7757,13 +7702,6 @@ packages:
       }
     dev: true
 
-  /which-module/2.0.0:
-    resolution:
-      {
-        integrity: sha512-B+enWhmw6cjfVC7kS8Pj9pCrKSc5txArRyaYGe088shv/FGWH+0Rjx/xPgtsWfsUtS27FkP697E4DDhgrgoc0Q==
-      }
-    dev: false
-
   /which/1.3.1:
     resolution:
       {
@@ -7803,6 +7741,7 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
+    dev: true
 
   /wrap-ansi/7.0.0:
     resolution:
@@ -7849,13 +7788,6 @@ packages:
     engines: { node: ">=0.4" }
     dev: true
 
-  /y18n/4.0.3:
-    resolution:
-      {
-        integrity: sha512-JKhqTOwSrqNA1NY5lSztJ1GrBiUodLMmIZuLiDaMRJ+itFd+ABVE8XBjOvIWL+rSqNDC74LCSFmlb/U4UZ4hJQ==
-      }
-    dev: false
-
   /y18n/5.0.8:
     resolution:
       {
@@ -7890,17 +7822,6 @@ packages:
     engines: { node: ">= 6" }
     dev: true
 
-  /yargs-parser/18.1.3:
-    resolution:
-      {
-        integrity: sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
-      }
-    engines: { node: ">=6" }
-    dependencies:
-      camelcase: 5.3.1
-      decamelize: 1.2.0
-    dev: false
-
   /yargs-parser/20.2.9:
     resolution:
       {
@@ -7917,26 +7838,6 @@ packages:
     engines: { node: ">=12" }
     dev: true
 
-  /yargs/15.4.1:
-    resolution:
-      {
-        integrity: sha512-aePbxDmcYW++PaqBsJ+HYUFwCdv4LVvdnhBy78E57PIor8/OVvhMrADFFEDh8DHDFRv/O9i3lPhsENjO7QX0+A==
-      }
-    engines: { node: ">=8" }
-    dependencies:
-      cliui: 6.0.0
-      decamelize: 1.2.0
-      find-up: 4.1.0
-      get-caller-file: 2.0.5
-      require-directory: 2.1.1
-      require-main-filename: 2.0.0
-      set-blocking: 2.0.0
-      string-width: 4.2.3
-      which-module: 2.0.0
-      y18n: 4.0.3
-      yargs-parser: 18.1.3
-    dev: false
-
   /yargs/17.5.1:
     resolution:
       {

src/components/ReImageVerify/index.ts

@@ -1,7 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,46 +0,0 @@
-<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

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

src/components/ReQrcode/src/index.scss

@@ -1,8 +0,0 @@
-.qrcode {
-  &--disabled {
-    background: rgba(255, 255, 255, 0.95);
-    & > div {
-      transform: translate(-50%, -50%);
-    }
-  }
-}

src/components/ReQrcode/src/index.tsx

@@ -1,262 +0,0 @@
-import {
-  ref,
-  unref,
-  watch,
-  nextTick,
-  computed,
-  PropType,
-  defineComponent
-} from "vue";
-import "./index.scss";
-import { cloneDeep } from "lodash-unified";
-import { isString } from "@pureadmin/utils";
-import { propTypes } from "/@/utils/propTypes";
-import { IconifyIconOffline } from "../../ReIcon";
-import QRCode, { QRCodeRenderersOptions } from "qrcode";
-
-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 HTMLImageElement).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">
-                <IconifyIconOffline
-                  class="cursor-pointer"
-                  icon="refresh-right"
-                  width="30"
-                  color="var(--el-color-primary)"
-                />
-                <div>{props.disabledText}</div>
-              </div>
-            </div>
-          )}
-        </div>
-      </>
-    );
-  }
-});

src/store/modules/user.ts

@@ -23,11 +23,7 @@ export const useUserStore = defineStore({
   id: "pure-user",
   state: (): userType => ({
     token,
-    name,
-    // 前端生成的验证码（按实际需求替换）
-    verifyCode: "",
-    // 登录显示组件判断 0：登录 1：手机登录 2：二维码登录 3：注册 4：忘记密码，默认0：登录
-    currentPage: 0
+    name
   }),
   actions: {
     SET_TOKEN(token) {
@@ -36,12 +32,6 @@ export const useUserStore = defineStore({
     SET_NAME(name) {
       this.name = name;
     },
-    SET_VERIFYCODE(verifyCode) {
-      this.verifyCode = verifyCode;
-    },
-    SET_CURRENTPAGE(value) {
-      this.currentPage = value;
-    },
     // 登入
     async loginByUsername(data) {
       return new Promise<void>((resolve, reject) => {

src/style/sidebar.scss

@@ -229,7 +229,7 @@
       .screen-full,
       /* 国际化 */
       .globalization,
-      /* 登陆名 */
+      /* 登录名 */
       .el-dropdown-link,
       /* 设置 */
       .el-icon-setting {
@@ -592,7 +592,7 @@ body[layout="vertical"] {
   .screen-full,
   /* 国际化 */
   .globalization,
-  /* 登陆名 */
+  /* 登录名 */
   .el-dropdown-link,
   /* 设置 */
   .el-icon-setting {

src/views/login/components/phone.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { ref, reactive } from "vue";
-import Motion from "../utils/motion";
-import { phoneRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
-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";
-
-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.success(transformI18n($t("login.loginSuccess")));
-        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
-          clearable
-          v-model="ruleForm.phone"
-          :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
-            clearable
-            v-model="ruleForm.verifyCode"
-            :placeholder="t('login.smsVerifyCode')"
-            :prefix-icon="
-              useRenderIcon('ri:shield-keyhole-line', { online: true })
-            "
-          />
-          <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

@@ -1,25 +0,0 @@
-<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

@@ -1,189 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { ref, reactive } from "vue";
-import Motion from "../utils/motion";
-import { updateRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
-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";
-
-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.success(transformI18n($t("login.registerSuccess")));
-          loading.value = false;
-        }, 2000);
-      } else {
-        loading.value = false;
-        message.warning(transformI18n($t("login.tickPrivacy")));
-      }
-    } 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
-          clearable
-          v-model="ruleForm.username"
-          :placeholder="t('login.username')"
-          :prefix-icon="useRenderIcon('user')"
-        />
-      </el-form-item>
-    </Motion>
-
-    <Motion :delay="100">
-      <el-form-item prop="phone">
-        <el-input
-          clearable
-          v-model="ruleForm.phone"
-          :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
-            clearable
-            v-model="ruleForm.verifyCode"
-            :placeholder="t('login.smsVerifyCode')"
-            :prefix-icon="
-              useRenderIcon('ri:shield-keyhole-line', { online: true })
-            "
-          />
-          <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
-          clearable
-          show-password
-          v-model="ruleForm.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
-          clearable
-          show-password
-          v-model="ruleForm.repeatPassword"
-          :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

@@ -1,151 +0,0 @@
-<script setup lang="ts">
-import { useI18n } from "vue-i18n";
-import { ref, reactive } from "vue";
-import Motion from "../utils/motion";
-import { updateRules } from "../utils/rule";
-import { message } from "@pureadmin/components";
-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";
-
-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.success(transformI18n($t("login.passwordUpdateReg")));
-        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
-          clearable
-          v-model="ruleForm.phone"
-          :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
-            clearable
-            v-model="ruleForm.verifyCode"
-            :placeholder="t('login.smsVerifyCode')"
-            :prefix-icon="
-              useRenderIcon('ri:shield-keyhole-line', { online: true })
-            "
-          />
-          <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
-          clearable
-          show-password
-          v-model="ruleForm.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
-          clearable
-          show-password
-          v-model="ruleForm.repeatPassword"
-          :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

@@ -3,22 +3,15 @@ import { useI18n } from "vue-i18n";
 import Motion from "./utils/motion";
 import { useRouter } from "vue-router";
 import { loginRules } from "./utils/rule";
-import phone from "./components/phone.vue";
-import qrCode from "./components/qrCode.vue";
-import regist from "./components/regist.vue";
-import update from "./components/update.vue";
+import { ref, reactive, toRaw } from "vue";
 import { initRouter } from "/@/router/utils";
 import { useNav } from "/@/layout/hooks/useNav";
 import { message } from "@pureadmin/components";
 import type { FormInstance } from "element-plus";
 import { storageSession } from "@pureadmin/utils";
 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 { bg, avatar, illustration } from "./utils/static";
-import { ref, reactive, watch, computed, toRaw } from "vue";
-import { ReImageVerify } from "/@/components/ReImageVerify";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
 import { useTranslationLang } from "/@/layout/hooks/useTranslationLang";
 import { useDataThemeChange } from "/@/layout/hooks/useDataThemeChange";
@@ -30,14 +23,9 @@ import globalization from "/@/assets/svg/globalization.svg?component";
 defineOptions({
   name: "Login"
 });
-const imgCode = ref("");
 const router = useRouter();
 const loading = ref(false);
-const checked = ref(false);
 const ruleFormRef = ref<FormInstance>();
-const currentPage = computed(() => {
-  return useUserStoreHook().currentPage;
-});
 
 const { initStorage } = useLayout();
 initStorage();
@@ -49,8 +37,7 @@ const { locale, translationCh, translationEn } = useTranslationLang();
 
 const ruleForm = reactive({
   username: "admin",
-  password: "admin123",
-  verifyCode: ""
+  password: "admin123"
 });
 
 const onLogin = async (formEl: FormInstance | undefined) => {
@@ -76,14 +63,6 @@ const onLogin = async (formEl: FormInstance | undefined) => {
   });
 };
 
-function onHandle(value) {
-  useUserStoreHook().SET_CURRENTPAGE(value);
-}
-
-watch(imgCode, value => {
-  useUserStoreHook().SET_VERIFYCODE(value);
-});
-
 dataThemeChange();
 </script>
 
@@ -144,7 +123,6 @@ dataThemeChange();
           </Motion>
 
           <el-form
-            v-if="currentPage === 0"
             ref="ruleFormRef"
             :model="ruleForm"
             :rules="loginRules"
@@ -183,94 +161,18 @@ dataThemeChange();
               </el-form-item>
             </Motion>
 
-            <Motion :delay="200">
-              <el-form-item prop="verifyCode">
-                <el-input
-                  clearable
-                  v-model="ruleForm.verifyCode"
-                  :placeholder="t('login.verifyCode')"
-                  :prefix-icon="
-                    useRenderIcon('ri:shield-keyhole-line', { online: true })
-                  "
-                >
-                  <template v-slot:append>
-                    <ReImageVerify v-model:code="imgCode" />
-                  </template>
-                </el-input>
-              </el-form-item>
-            </Motion>
-
             <Motion :delay="250">
-              <el-form-item>
-                <div class="w-full h-[20px] flex justify-between items-center">
-                  <el-checkbox v-model="checked">
-                    {{ t("login.remember") }}
-                  </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"
-                  @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="onHandle(index + 1)"
-                  >
-                    {{ t(item.title) }}
-                  </el-button>
-                </div>
-              </el-form-item>
+              <el-button
+                class="w-full mt-4"
+                size="default"
+                type="primary"
+                :loading="loading"
+                @click="onLogin(ruleFormRef)"
+              >
+                {{ t("login.login") }}
+              </el-button>
             </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>

src/views/login/utils/enums.ts

@@ -1,34 +0,0 @@
-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,11 +1,6 @@
 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 =
@@ -26,99 +21,7 @@ const loginRules = reactive(<FormRules>{
       },
       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) => {
-        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"
-    }
   ]
 });
 
-export { loginRules, phoneRules, updateRules };
+export { loginRules };

src/views/login/utils/verifyCode.ts

@@ -1,49 +0,0 @@
-import type { FormInstance, FormItemProp } from "element-plus";
-import { cloneDeep } from "lodash-unified";
-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 = cloneDeep(time);
-    await formEl.validateField(props, isValid => {
-      if (isValid) {
-        clearInterval(timer.value);
-        timer.value = setInterval(() => {
-          if (time > 0) {
-            text.value = `${time}`;
-            isDisabled.value = true;
-            time -= 1;
-          } 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
-  };
-};