✨登录新增二维码

index.html

@@ -130,7 +130,7 @@
       <div class="loading-wrp">
         <span class="dot dot-spin"> <i></i> <i></i> <i></i> <i></i> </span>
       </div>
-      <h5>Loading...</h5>
+      <h5>正在加载系统资源...</h5>
     </div>
   </div>
   <script type="module" src="/src/main.js"></script>

package.json

@@ -33,6 +33,7 @@
     "md-editor-v3": "^1.11.11",
     "nprogress": "0.2.0",
     "pinia": "^2.0.33",
+    "qrcodejs2-fixes": "^0.0.2",
     "qs": "^6.11.0",
     "sortablejs": "^1.15.0",
     "vue": "^3.3.4",

src/assets/icons/svg/pc.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691394989170" class="icon" viewBox="0 0 1170 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8595" xmlns:xlink="http://www.w3.org/1999/xlink" width="228.515625" height="200"><path d="M585.142857 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z" fill="#54C3F1" p-id="8596"></path><path d="M731.428571 365.714286m-36.571428 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z" fill="#54C3F1" p-id="8597"></path><path d="M438.857143 365.714286m-36.571429 0a36.571429 36.571429 0 1 0 73.142857 0 36.571429 36.571429 0 1 0-73.142857 0Z" fill="#54C3F1" p-id="8598"></path><path d="M1060.571429 877.714286H109.714286a109.714286 109.714286 0 0 1-109.714286-109.714286V109.714286a109.714286 109.714286 0 0 1 109.714286-109.714286h950.857143a109.714286 109.714286 0 0 1 109.714285 109.714286v658.285714a109.714286 109.714286 0 0 1-109.714285 109.714286zM109.714286 73.142857a36.571429 36.571429 0 0 0-36.571429 36.571429v658.285714a36.571429 36.571429 0 0 0 36.571429 36.571429h950.857143a36.571429 36.571429 0 0 0 36.571428-36.571429V109.714286a36.571429 36.571429 0 0 0-36.571428-36.571429z" fill="#54C3F1" p-id="8599"></path><path d="M36.571429 658.285714h1097.142857v73.142857H36.571429zM402.285714 841.142857h73.142857v146.285714h-73.142857zM694.857143 841.142857h73.142857v146.285714h-73.142857z" fill="#54C3F1" p-id="8600"></path><path d="M292.571429 950.857143h585.142857v73.142857H292.571429z" fill="#54C3F1" p-id="8601"></path></svg>

src/assets/icons/svg/qr.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1691394871411" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2379" width="200" height="200" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M480 544H368v-64h112V368h64v288h-64V544z m368 304V592h64v320H592v-64h256zM656 656v144h-64V592h208v64H656zM176 176v192h192V176H176z m-64-64h320v320H112V112z m544 64v192h192V176H656z m-64-64h320v320H592V112zM112 480h160v64H112v-64z m640 0h160v64H752v-64zM544 112v160h-64V112h64z m0 640v160h-64V752h64z m-368-96v192h192V656H176z m-64-64h320v320H112V592z m112-368h96v96h-96v-96z m0 480h96v96h-96v-96z m480-480h96v96h-96v-96z" fill="#5090F1" p-id="2380"></path></svg>

src/assets/styles/login.scss

@@ -21,7 +21,7 @@
   background: #ffffff;
   // background-color: hsla(0, 0%, 100%, 0.3);
   width: var(--base-login-width);
-  padding: 25px 15px 5px 15px;
+  padding: 35px 15px 5px 15px;
   position: relative;
 
   .input-icon {
@@ -68,6 +68,45 @@
 }
 .langSet {
   position: absolute;
-  right: 20px;
+  left: 20px;
   top: 10px;
 }
+
+.scan-wrap {
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50px;
+  height: 50px;
+  cursor: pointer;
+  transition: all ease 0.3s;
+  overflow: hidden;
+
+  .icon {
+    width: 48px;
+    height: 50px;
+    display: inline-block;
+    font-size: 48px;
+    position: absolute;
+    right: 1px;
+    top: 0px;
+  }
+  .scan-delta {
+    position: absolute;
+    width: 35px;
+    height: 70px;
+    z-index: 2;
+    top: 2px;
+    right: 21px;
+    background: var(--el-color-white);
+    transform: rotate(-45deg);
+  }
+}
+
+.login-scan-container {
+  padding: 0 20px 20px;
+  display: flex;
+  flex-direction: column;
+  text-align: center;
+  align-items: center;
+}

src/views/login.vue

@@ -1,9 +1,13 @@
 <template>
   <starBackground></starBackground>
   <div class="login">
-    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form">
+    <el-form ref="loginRef" :model="loginForm" :rules="loginRules" class="login-form" v-if="!showQrLogin">
       <h3 class="title">{{ defaultSettings.title }}</h3>
 
+      <div class="scan-wrap" @click="handleShowQrLogin()">
+        <svg-icon name="qr" class="icon" />
+        <div class="scan-delta"></div>
+      </div>
       <LangSelect title="多语言设置" class="langSet" />
       <el-form-item prop="username">
         <el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('login.account')">
@@ -52,6 +56,18 @@
       </div>
     </el-form>
 
+    <div class="qr-wrap login-form" v-else>
+      <h3 class="title">移动端扫码登录</h3>
+      <div class="scan-wrap" @click="handleShowQrLogin()">
+        <svg-icon name="pc" class="icon" />
+        <div class="scan-delta"></div>
+      </div>
+
+      <div class="login-scan-container">
+        <div ref="imgContainerRef" id="imgContainer"></div>
+      </div>
+    </div>
+
     <!--  底部  -->
     <div class="el-login-footer">
       <div v-html="defaultSettings.copyright"></div>
@@ -67,6 +83,7 @@ import defaultSettings from '@/settings'
 import starBackground from '@/views/components/starBackground.vue'
 import LangSelect from '@/components/LangSelect/index.vue'
 import useUserStore from '@/store/modules/user'
+import QRCode from 'qrcodejs2-fixes'
 
 const userStore = useUserStore()
 const router = useRouter()
@@ -161,6 +178,27 @@ function onAuth(type) {
 function handleForgetPwd() {
   proxy.$modal.msg('请联系管理员')
 }
+
+const showQrLogin = ref(false)
+function handleShowQrLogin() {
+  showQrLogin.value = !showQrLogin.value
+
+  if (showQrLogin.value) {
+    nextTick(() => {
+      generateCode()
+    })
+  }
+}
+// 生成二维码
+function generateCode() {
+  document.getElementById('imgContainer').innerHTML = ''
+  new QRCode(document.getElementById('imgContainer'), {
+    text: 'https://qm.qq.com/cgi-bin/qm/qr?k=kgt4HsckdljU0VM-0kxND6d_igmfuPlL&authKey=r55YUbruiKQ5iwC/folG7KLCmZ++Y4rQVgNlvLbUniUMkbk24Y9+zNuOmOnjAjRc&noverify=0',
+    width: 200,
+    height: 200
+  })
+}
+
 getCode()
 getCookie()
 </script>