From 63e2ddc171c3bcd5bb2db45b2ecee43501652b60 Mon Sep 17 00:00:00 2001 From: xiaoxian521 <1923740402@qq.com> Date: Wed, 7 Sep 2022 16:47:57 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E7=AE=80=E5=8C=96=E7=99=BB=E5=BD=95?= =?UTF-8?q?=E9=A1=B5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- locales/en.yaml | 33 --- locales/zh-CN.yaml | 33 --- package.json | 2 - pnpm-lock.yaml | 137 ++--------- src/components/ReImageVerify/index.ts | 7 - src/components/ReImageVerify/src/hooks.ts | 85 ------- src/components/ReImageVerify/src/index.vue | 46 ---- src/components/ReQrcode/index.ts | 7 - src/components/ReQrcode/src/index.scss | 8 - src/components/ReQrcode/src/index.tsx | 262 --------------------- src/store/modules/user.ts | 12 +- src/style/sidebar.scss | 4 +- src/views/login/components/phone.vue | 106 --------- src/views/login/components/qrCode.vue | 25 -- src/views/login/components/regist.vue | 189 --------------- src/views/login/components/update.vue | 151 ------------ src/views/login/index.vue | 120 +--------- src/views/login/utils/enums.ts | 34 --- src/views/login/utils/rule.ts | 99 +------- src/views/login/utils/verifyCode.ts | 49 ---- 20 files changed, 34 insertions(+), 1375 deletions(-) delete mode 100644 src/components/ReImageVerify/index.ts delete mode 100644 src/components/ReImageVerify/src/hooks.ts delete mode 100644 src/components/ReImageVerify/src/index.vue delete mode 100644 src/components/ReQrcode/index.ts delete mode 100644 src/components/ReQrcode/src/index.scss delete mode 100644 src/components/ReQrcode/src/index.tsx delete mode 100644 src/views/login/components/phone.vue delete mode 100644 src/views/login/components/qrCode.vue delete mode 100644 src/views/login/components/regist.vue delete mode 100644 src/views/login/components/update.vue delete mode 100644 src/views/login/utils/enums.ts delete mode 100644 src/views/login/utils/verifyCode.ts diff --git a/locales/en.yaml b/locales/en.yaml index dded50f..c9870ee 100644 --- a/locales/en.yaml +++ b/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 diff --git a/locales/zh-CN.yaml b/locales/zh-CN.yaml index 83cebd3..1de3829 100644 --- a/locales/zh-CN.yaml +++ b/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: 修改密码成功 diff --git a/package.json b/package.json index d2f8c70..ff83a87 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 1028880..7adaae3 100644 --- a/pnpm-lock.yaml +++ b/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.22_typescript@4.8.2+vue@3.2.38 - 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@3.2.38 vue-router: 4.1.5_vue@3.2.38 @@ -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: { diff --git a/src/components/ReImageVerify/index.ts b/src/components/ReImageVerify/index.ts deleted file mode 100644 index 4215c52..0000000 --- a/src/components/ReImageVerify/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import reImageVerify from "./src/index.vue"; -import { withInstall } from "@pureadmin/utils"; - -/** 图形验证码组件 */ -export const ReImageVerify = withInstall(reImageVerify); - -export default ReImageVerify; diff --git a/src/components/ReImageVerify/src/hooks.ts b/src/components/ReImageVerify/src/hooks.ts deleted file mode 100644 index 71fcdfc..0000000 --- a/src/components/ReImageVerify/src/hooks.ts +++ /dev/null @@ -1,85 +0,0 @@ -import { ref, onMounted } from "vue"; - -/** - * 绘制图形验证码 - * @param width - 图形宽度 - * @param height - 图形高度 - */ -export const useImageVerify = (width = 120, height = 40) => { - const domRef = ref(); - 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; -} diff --git a/src/components/ReImageVerify/src/index.vue b/src/components/ReImageVerify/src/index.vue deleted file mode 100644 index 03d0662..0000000 --- a/src/components/ReImageVerify/src/index.vue +++ /dev/null @@ -1,46 +0,0 @@ - - - diff --git a/src/components/ReQrcode/index.ts b/src/components/ReQrcode/index.ts deleted file mode 100644 index 48037a8..0000000 --- a/src/components/ReQrcode/index.ts +++ /dev/null @@ -1,7 +0,0 @@ -import reQrcode from "./src/index"; -import { withInstall } from "@pureadmin/utils"; - -/** 二维码组件 */ -export const ReQrcode = withInstall(reQrcode); - -export default ReQrcode; diff --git a/src/components/ReQrcode/src/index.scss b/src/components/ReQrcode/src/index.scss deleted file mode 100644 index 5f6a3ff..0000000 --- a/src/components/ReQrcode/src/index.scss +++ /dev/null @@ -1,8 +0,0 @@ -.qrcode { - &--disabled { - background: rgba(255, 255, 255, 0.95); - & > div { - transform: translate(-50%, -50%); - } - } -} diff --git a/src/components/ReQrcode/src/index.tsx b/src/components/ReQrcode/src/index.tsx deleted file mode 100644 index a976331..0000000 --- a/src/components/ReQrcode/src/index.tsx +++ /dev/null @@ -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, - default: null - }, - // qrcode.js配置项 - options: { - type: Object as PropType, - default: (): QRCodeRenderersOptions => ({}) - }, - // 宽度 - width: propTypes.number.def(200), - // logo - logo: { - type: [String, Object] as PropType | 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>(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 () => ( - <> -
- {props.tag === "canvas" ? ( - - ) : ( - - )} - {props.disabled && ( -
-
- -
{props.disabledText}
-
-
- )} -
- - ); - } -}); diff --git a/src/store/modules/user.ts b/src/store/modules/user.ts index f93aedf..5849011 100644 --- a/src/store/modules/user.ts +++ b/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((resolve, reject) => { diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss index 476b86c..df4f7db 100644 --- a/src/style/sidebar.scss +++ b/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 { diff --git a/src/views/login/components/phone.vue b/src/views/login/components/phone.vue deleted file mode 100644 index 83a423a..0000000 --- a/src/views/login/components/phone.vue +++ /dev/null @@ -1,106 +0,0 @@ - - - diff --git a/src/views/login/components/qrCode.vue b/src/views/login/components/qrCode.vue deleted file mode 100644 index b524c2d..0000000 --- a/src/views/login/components/qrCode.vue +++ /dev/null @@ -1,25 +0,0 @@ - - - diff --git a/src/views/login/components/regist.vue b/src/views/login/components/regist.vue deleted file mode 100644 index 5e7cd37..0000000 --- a/src/views/login/components/regist.vue +++ /dev/null @@ -1,189 +0,0 @@ - - - diff --git a/src/views/login/components/update.vue b/src/views/login/components/update.vue deleted file mode 100644 index cf8468a..0000000 --- a/src/views/login/components/update.vue +++ /dev/null @@ -1,151 +0,0 @@ - - - diff --git a/src/views/login/index.vue b/src/views/login/index.vue index 6a6981d..2d2e877 100644 --- a/src/views/login/index.vue +++ b/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(); -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(); @@ -144,7 +123,6 @@ dataThemeChange(); - - - - - - - - - -
- - {{ t("login.remember") }} - - - {{ t("login.forget") }} - -
- - {{ t("login.login") }} - - - - - - -
- - {{ t(item.title) }} - -
- + + {{ t("login.login") }} + - - - - -

{{ t("login.thirdLogin") }}

- -
- - - -
- - - - - - - - - - diff --git a/src/views/login/utils/enums.ts b/src/views/login/utils/enums.ts deleted file mode 100644 index ae11b5c..0000000 --- a/src/views/login/utils/enums.ts +++ /dev/null @@ -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 }; diff --git a/src/views/login/utils/rule.ts b/src/views/login/utils/rule.ts index 611c3bc..df78f8b 100644 --- a/src/views/login/utils/rule.ts +++ b/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({ }, 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({ - 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({ - 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 }; diff --git a/src/views/login/utils/verifyCode.ts b/src/views/login/utils/verifyCode.ts deleted file mode 100644 index ee7ae9d..0000000 --- a/src/views/login/utils/verifyCode.ts +++ /dev/null @@ -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 - }; -};