From 18d39f423f40c98adbdc3523b99eb9c2885b9528 Mon Sep 17 00:00:00 2001
From: wf <2547096351@qq.com>
Date: Mon, 8 Apr 2024 20:25:28 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=99=BB=E5=BD=95=E9=A1=B5=E6=90=AD?=
 =?UTF-8?q?=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/auto-import.d.ts       | 130 +++++++++++++++++--------------------
 src/components.d.ts        |   8 +--
 src/router/index.ts        |  11 +++-
 src/router/route-output.ts |   2 +-
 src/views/login/login.vue  |  89 ++++++++++++++++++++++++-
 5 files changed, 159 insertions(+), 81 deletions(-)

diff --git a/src/auto-import.d.ts b/src/auto-import.d.ts
index 714a6ac..65b02fd 100644
--- a/src/auto-import.d.ts
+++ b/src/auto-import.d.ts
@@ -5,79 +5,67 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: (typeof import("vue"))["EffectScope"];
-  const computed: (typeof import("vue"))["computed"];
-  const createApp: (typeof import("vue"))["createApp"];
-  const customRef: (typeof import("vue"))["customRef"];
-  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
-  const defineComponent: (typeof import("vue"))["defineComponent"];
-  const effectScope: (typeof import("vue"))["effectScope"];
-  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
-  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
-  const h: (typeof import("vue"))["h"];
-  const inject: (typeof import("vue"))["inject"];
-  const isProxy: (typeof import("vue"))["isProxy"];
-  const isReactive: (typeof import("vue"))["isReactive"];
-  const isReadonly: (typeof import("vue"))["isReadonly"];
-  const isRef: (typeof import("vue"))["isRef"];
-  const markRaw: (typeof import("vue"))["markRaw"];
-  const nextTick: (typeof import("vue"))["nextTick"];
-  const onActivated: (typeof import("vue"))["onActivated"];
-  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
-  const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
-  const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
-  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
-  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
-  const onDeactivated: (typeof import("vue"))["onDeactivated"];
-  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
-  const onMounted: (typeof import("vue"))["onMounted"];
-  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
-  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
-  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
-  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
-  const onUnmounted: (typeof import("vue"))["onUnmounted"];
-  const onUpdated: (typeof import("vue"))["onUpdated"];
-  const provide: (typeof import("vue"))["provide"];
-  const reactive: (typeof import("vue"))["reactive"];
-  const readonly: (typeof import("vue"))["readonly"];
-  const ref: (typeof import("vue"))["ref"];
-  const resolveComponent: (typeof import("vue"))["resolveComponent"];
-  const shallowReactive: (typeof import("vue"))["shallowReactive"];
-  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
-  const shallowRef: (typeof import("vue"))["shallowRef"];
-  const toRaw: (typeof import("vue"))["toRaw"];
-  const toRef: (typeof import("vue"))["toRef"];
-  const toRefs: (typeof import("vue"))["toRefs"];
-  const toValue: (typeof import("vue"))["toValue"];
-  const triggerRef: (typeof import("vue"))["triggerRef"];
-  const unref: (typeof import("vue"))["unref"];
-  const useAttrs: (typeof import("vue"))["useAttrs"];
-  const useCssModule: (typeof import("vue"))["useCssModule"];
-  const useCssVars: (typeof import("vue"))["useCssVars"];
-  const useLink: (typeof import("vue-router"))["useLink"];
-  const useRoute: (typeof import("vue-router"))["useRoute"];
-  const useRouter: (typeof import("vue-router"))["useRouter"];
-  const useSlots: (typeof import("vue"))["useSlots"];
-  const watch: (typeof import("vue"))["watch"];
-  const watchEffect: (typeof import("vue"))["watchEffect"];
-  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
-  const watchSyncEffect: (typeof import("vue"))["watchSyncEffect"];
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const toValue: typeof import('vue')['toValue']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useLink: typeof import('vue-router')['useLink']
+  const useRoute: typeof import('vue-router')['useRoute']
+  const useRouter: typeof import('vue-router')['useRouter']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
 }
 // for type re-export
 declare global {
   // @ts-ignore
-  export type {
-    Component,
-    ComponentPublicInstance,
-    ComputedRef,
-    ExtractDefaultPropTypes,
-    ExtractPropTypes,
-    ExtractPublicPropTypes,
-    InjectionKey,
-    PropType,
-    Ref,
-    VNode,
-    WritableComputedRef
-  } from "vue";
-  import("vue");
+  export type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'
+  import('vue')
 }
diff --git a/src/components.d.ts b/src/components.d.ts
index 3a9bd79..fa3e33e 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -5,10 +5,10 @@
 // Read more: https://github.com/vuejs/core/pull/3399
 export {}
 
-declare module "vue" {
+declare module 'vue' {
   export interface GlobalComponents {
-    RouterLink: (typeof import("vue-router"))["RouterLink"];
-    RouterView: (typeof import("vue-router"))["RouterView"];
-    SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
   }
 }
diff --git a/src/router/index.ts b/src/router/index.ts
index aa44cc6..02fdd11 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,9 +22,16 @@ export const router = createRouter({
 // 路由加载前
 router.beforeEach(async (to, from, next) => {
   NProgress.start(); // 开启进度条
-  initSetRouter();
-  next();
   console.log(to, from);
+  if (to.path === "/login" && !sessionStorage.getItem("token")) {
+    next();
+  } else if (!sessionStorage.getItem("token")) {
+    next("/login");
+  } else if (to.path === "/login" && sessionStorage.getItem("token")) {
+    next("/home");
+  } else {
+    await initSetRouter();
+  }
   // if (to.path === "/login" && !sessionStorage.getItem("token")) {
   //   next();
   // } else if (!sessionStorage.getItem("token")) {
diff --git a/src/router/route-output.ts b/src/router/route-output.ts
index 81f7a63..094a937 100644
--- a/src/router/route-output.ts
+++ b/src/router/route-output.ts
@@ -1,3 +1,3 @@
 export function initSetRouter() {
-  console.log("路由数据");
+  console.log("路由数据处理");
 }
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index cd37694..90b9333 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -1,7 +1,90 @@
 <template>
-  <div>登录</div>
+  <div class="container">
+    <div class="logo_box">
+      <img :src="myImage" alt="logo" class="logo margin-right-text" />
+      DC Admin
+    </div>
+    <div class="banner">
+      <a-carousel
+        :style="{
+          width: '100%',
+          height: '100%'
+        }"
+        :default-current="2"
+        :auto-play="true"
+        animation-name="fade"
+        indicator-type="dot"
+        show-arrow="hover"
+        class="banner_box"
+      >
+        <a-carousel-item v-for="item in banner" :key="item.id">
+          <div class="banner_inner"></div>
+        </a-carousel-item>
+      </a-carousel>
+    </div>
+    <div class="login">登录</div>
+  </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import myImage from "@/assets/img/my-image.jpg";
+const banner = ref([
+  {
+    id: 1,
+    title: "开箱即用的高质量模板",
+    desc: "丰富的的页面模板，覆盖大多数典型业务场景",
+    src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/cd7a1aaea8e1c5e3d26fe2591e561798.png~tplv-uwbnlip3yd-webp.webp"
+  },
+  {
+    id: 2,
+    title: "内置了常见问题的解决方案",
+    desc: "国际化，路由配置，状态管理应有尽有",
+    src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/6480dbc69be1b5de95010289787d64f1.png~tplv-uwbnlip3yd-webp.webp"
+  },
+  {
+    id: 3,
+    title: "接入可视化增强工具",
+    desc: "实现灵活的区块式开发",
+    src: "https://p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/0265a04fddbd77a19602a15d9d55d797.png~tplv-uwbnlip3yd-webp.webp"
+  }
+]);
+</script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.container {
+  height: 100vh;
+  display: flex;
+  position: relative;
+  .banner {
+    width: 550px;
+    height: 100%;
+    background: #eee;
+    .banner_box {
+      height: 100%;
+      background: linear-gradient(163.85deg, #1d2129 0%, #00308f 100%);
+      .banner_inner {
+        height: 100%;
+      }
+    }
+  }
+  .login {
+    width: 100%;
+    height: 100%;
+  }
+}
+.logo_box {
+  position: absolute;
+  left: $margin;
+  top: $margin;
+  margin: $margin;
+  color: #fff;
+  font-size: $font-size-title-2;
+  display: flex;
+  align-items: center;
+  z-index: 1000;
+  .logo {
+    width: 50px;
+    border-radius: 50%;
+  }
+}
+</style>