feat: 第三方登录认证功能和管理页

src/views/login/index.vue

@@ -0,0 +1,105 @@
+<script lang="ts" setup>
+import { computed, onMounted } from 'vue';
+import useAppStore from '@/store/modules/app';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import {
+  currentComponent,
+  fnGetLoginSource,
+} from '@/views/login/hooks/useLoginSource';
+const appStore = useAppStore();
+
+// 判断是否有背景地址
+const calcBG = computed(() => {
+  const bgURL = parseUrlPath(appStore.loginBackground);
+  if (bgURL && bgURL !== '#') {
+    return {
+      backgroundImage: `url('${bgURL}')`,
+      backgroundPosition: 'center',
+      backgroundSize: 'cover',
+    };
+  }
+  return undefined;
+});
+
+onMounted(() => {
+  // 获取登录认证源
+  fnGetLoginSource();
+});
+</script>
+
+<template>
+  <div class="container" :style="calcBG">
+    <section v-show="!calcBG">
+      <div class="animation animation1"></div>
+      <div class="animation animation2"></div>
+      <div class="animation animation3"></div>
+      <div class="animation animation4"></div>
+      <div class="animation animation5"></div>
+    </section>
+
+    <component :is="currentComponent" />
+  </div>
+</template>
+
+<style lang="less" scoped>
+.container {
+  position: relative;
+  width: 100%;
+  min-height: 100%;
+  padding-top: 164px;
+
+  // background: url('./../assets/black_dot.png') 0% 0% / 14px 14px repeat;
+
+  background-image: url(/background/light.jpg);
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-position: center center;
+
+  .animation {
+    position: absolute;
+    width: 6px;
+    height: 6px;
+    border-radius: 50%;
+    background-color: #1be1f6;
+
+    &.animation1 {
+      left: 15%;
+      top: 70%;
+      animation: slashStar 2s ease-in-out 0.3s infinite;
+    }
+    &.animation2 {
+      left: 34%;
+      top: 35%;
+      animation: slashStar 2s ease-in-out 1.2s infinite;
+    }
+    &.animation3 {
+      left: 10%;
+      top: 8%;
+      animation: slashStar 2s ease-in-out 0.5s infinite;
+    }
+    &.animation4 {
+      left: 68%;
+      top: 68%;
+      animation: slashStar 2s ease-in-out 0.8s infinite;
+    }
+    &.animation5 {
+      left: 87%;
+      top: 30%;
+      animation: slashStar 2s ease-in-out 1.5s infinite;
+    }
+  }
+  @keyframes slashStar {
+    0% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+    }
+  }
+}
+
+[data-theme='dark'] .container {
+  background-image: url(/background/dark.jpg);
+  background-color: #141414;
+}
+</style>