feat: 添加第三方授权认证

src/views/login/components/SocialSignin.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="social-signup-container">
+    <div class="sign-btn" @click="wechatHandleClick('wechat')">
+      <span class="wx-svg-container">
+        <svg-icon icon-class="wechat" class="icon" />
+      </span>
+      WeChat
+    </div>
+    <div class="sign-btn" @click="tencentHandleClick('tencent')">
+      <span class="qq-svg-container">
+        <svg-icon icon-class="qq" class="icon" />
+      </span>
+      QQ
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+/**
+ * 微信授权
+ */
+function wechatHandleClick(thirdpart: string) {
+  alert('ok');
+  // this.$store.commit('SET_AUTH_TYPE', thirdpart)
+  // const appid = 'xxxxx'
+  // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
+  // const url = 'https://open.weixin.qq.com/connect/qrconnect?appid=' + appid + '&redirect_uri=' + redirect_uri + '&response_type=code&scope=snsapi_login#wechat_redirect'
+  // openWindow(url, thirdpart, 540, 540)
+}
+
+/**
+ * QQ授权
+ */
+function tencentHandleClick(thirdpart: string) {
+  alert('ok');
+  // this.$store.commit('SET_AUTH_TYPE', thirdpart)
+  // const client_id = 'xxxxx'
+  // const redirect_uri = encodeURIComponent('xxx/redirect?redirect=' + window.location.origin + '/auth-redirect')
+  // const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=' + client_id + '&redirect_uri=' + redirect_uri
+  // openWindow(url, thirdpart, 540, 540)
+}
+</script>
+
+<style lang="scss" scoped>
+.social-signup-container {
+  margin: 20px 0;
+
+  .sign-btn {
+    display: inline-block;
+    cursor: pointer;
+  }
+
+  .icon {
+    color: #fff;
+    font-size: 24px;
+    margin-top: 8px;
+  }
+
+  .wx-svg-container,
+  .qq-svg-container {
+    display: inline-block;
+    width: 40px;
+    height: 40px;
+    line-height: 40px;
+    text-align: center;
+    padding-top: 1px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+    margin-right: 5px;
+  }
+
+  .wx-svg-container {
+    background-color: #24da70;
+  }
+
+  .qq-svg-container {
+    background-color: #6ba2d6;
+    margin-left: 50px;
+  }
+}
+</style>

src/views/login/index.vue

@@ -89,11 +89,22 @@
         >{{ $t('login.login') }}
       </el-button>
 
+      <!-- 账号密码提示 -->
       <div class="tips">
-        <span style="margin-right: 20px"
-          >{{ $t('login.username') }}: admin</span
+        <div style="position: relative">
+          <span style="margin-right: 20px"
+            >{{ $t('login.username') }}: admin</span
+          >
+          <span> {{ $t('login.password') }}: 123456</span>
+        </div>
+
+        <el-button
+          class="thirdparty-button"
+          type="primary"
+          @click="showDialog = true"
         >
-        <span> {{ $t('login.password') }}: 123456</span>
+          Or connect with
+        </el-button>
       </div>
     </el-form>
 
@@ -101,6 +112,15 @@
       <p>{{ $t('login.copyright') }}</p>
       <p>{{ $t('login.icp') }}</p>
     </div>
+
+    <el-dialog title="Or connect with" v-model="showDialog">
+      Can not be simulated on local, so please combine you own business
+      simulation! ! !
+      <br />
+      <br />
+      <br />
+      <SocialSignin />
+    </el-dialog>
   </div>
 </template>
 
@@ -112,6 +132,7 @@ import { ElForm, ElInput } from 'element-plus';
 import router from '@/router';
 import LangSelect from '@/components/LangSelect/index.vue';
 import SvgIcon from '@/components/SvgIcon/index.vue';
+import SocialSignin from './components/SocialSignin.vue';
 
 // 状态管理依赖
 import useStore from '@/store';
@@ -133,13 +154,11 @@ const state = reactive({
     username: 'admin',
     password: '123456',
     code: '',
-    uuid: '',
+    uuid: ''
   } as LoginFormData,
   loginRules: {
     username: [{ required: true, trigger: 'blur' }],
-    password: [
-      { required: true, trigger: 'blur', validator: validatePassword },
-    ],
+    password: [{ required: true, trigger: 'blur', validator: validatePassword }]
   },
   loading: false,
   passwordType: 'password',
@@ -149,6 +168,7 @@ const state = reactive({
   otherQuery: {},
   clientHeight: document.documentElement.clientHeight,
   showCopyright: true,
+  showDialog: false
 });
 
 function validatePassword(rule: any, value: any, callback: any) {
@@ -167,6 +187,7 @@ const {
   captchaBase64,
   capslockTooltipDisabled,
   showCopyright,
+  showDialog
 } = toRefs(state);
 
 function checkCapslock(e: any) {
@@ -225,7 +246,7 @@ watch(
     }
   },
   {
-    immediate: true,
+    immediate: true
   }
 );
 
@@ -407,4 +428,16 @@ $light_gray: #eee;
     }
   }
 }
+
+.thirdparty-button {
+  position: absolute;
+  right: 40px;
+  bottom: 6px;
+}
+
+@media only screen and (max-width: 470px) {
+  .thirdparty-button {
+    display: none;
+  }
+}
 </style>