feat: 登录和退出登录

src/auto-import.d.ts

@@ -5,67 +5,79 @@
 // Generated by unplugin-auto-import
 export {}
 declare global {
-  const EffectScope: typeof import('vue')['EffectScope']
+  const EffectScope: (typeof import("vue"))["EffectScope"];
-  const computed: typeof import('vue')['computed']
+  const computed: (typeof import("vue"))["computed"];
-  const createApp: typeof import('vue')['createApp']
+  const createApp: (typeof import("vue"))["createApp"];
-  const customRef: typeof import('vue')['customRef']
+  const customRef: (typeof import("vue"))["customRef"];
-  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineAsyncComponent: (typeof import("vue"))["defineAsyncComponent"];
-  const defineComponent: typeof import('vue')['defineComponent']
+  const defineComponent: (typeof import("vue"))["defineComponent"];
-  const effectScope: typeof import('vue')['effectScope']
+  const effectScope: (typeof import("vue"))["effectScope"];
-  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentInstance: (typeof import("vue"))["getCurrentInstance"];
-  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getCurrentScope: (typeof import("vue"))["getCurrentScope"];
-  const h: typeof import('vue')['h']
+  const h: (typeof import("vue"))["h"];
-  const inject: typeof import('vue')['inject']
+  const inject: (typeof import("vue"))["inject"];
-  const isProxy: typeof import('vue')['isProxy']
+  const isProxy: (typeof import("vue"))["isProxy"];
-  const isReactive: typeof import('vue')['isReactive']
+  const isReactive: (typeof import("vue"))["isReactive"];
-  const isReadonly: typeof import('vue')['isReadonly']
+  const isReadonly: (typeof import("vue"))["isReadonly"];
-  const isRef: typeof import('vue')['isRef']
+  const isRef: (typeof import("vue"))["isRef"];
-  const markRaw: typeof import('vue')['markRaw']
+  const markRaw: (typeof import("vue"))["markRaw"];
-  const nextTick: typeof import('vue')['nextTick']
+  const nextTick: (typeof import("vue"))["nextTick"];
-  const onActivated: typeof import('vue')['onActivated']
+  const onActivated: (typeof import("vue"))["onActivated"];
-  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeMount: (typeof import("vue"))["onBeforeMount"];
-  const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']
+  const onBeforeRouteLeave: (typeof import("vue-router"))["onBeforeRouteLeave"];
-  const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']
+  const onBeforeRouteUpdate: (typeof import("vue-router"))["onBeforeRouteUpdate"];
-  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUnmount: (typeof import("vue"))["onBeforeUnmount"];
-  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onBeforeUpdate: (typeof import("vue"))["onBeforeUpdate"];
-  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onDeactivated: (typeof import("vue"))["onDeactivated"];
-  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onErrorCaptured: (typeof import("vue"))["onErrorCaptured"];
-  const onMounted: typeof import('vue')['onMounted']
+  const onMounted: (typeof import("vue"))["onMounted"];
-  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTracked: (typeof import("vue"))["onRenderTracked"];
-  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onRenderTriggered: (typeof import("vue"))["onRenderTriggered"];
-  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onScopeDispose: (typeof import("vue"))["onScopeDispose"];
-  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onServerPrefetch: (typeof import("vue"))["onServerPrefetch"];
-  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUnmounted: (typeof import("vue"))["onUnmounted"];
-  const onUpdated: typeof import('vue')['onUpdated']
+  const onUpdated: (typeof import("vue"))["onUpdated"];
-  const provide: typeof import('vue')['provide']
+  const provide: (typeof import("vue"))["provide"];
-  const reactive: typeof import('vue')['reactive']
+  const reactive: (typeof import("vue"))["reactive"];
-  const readonly: typeof import('vue')['readonly']
+  const readonly: (typeof import("vue"))["readonly"];
-  const ref: typeof import('vue')['ref']
+  const ref: (typeof import("vue"))["ref"];
-  const resolveComponent: typeof import('vue')['resolveComponent']
+  const resolveComponent: (typeof import("vue"))["resolveComponent"];
-  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReactive: (typeof import("vue"))["shallowReactive"];
-  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowReadonly: (typeof import("vue"))["shallowReadonly"];
-  const shallowRef: typeof import('vue')['shallowRef']
+  const shallowRef: (typeof import("vue"))["shallowRef"];
-  const toRaw: typeof import('vue')['toRaw']
+  const toRaw: (typeof import("vue"))["toRaw"];
-  const toRef: typeof import('vue')['toRef']
+  const toRef: (typeof import("vue"))["toRef"];
-  const toRefs: typeof import('vue')['toRefs']
+  const toRefs: (typeof import("vue"))["toRefs"];
-  const toValue: typeof import('vue')['toValue']
+  const toValue: (typeof import("vue"))["toValue"];
-  const triggerRef: typeof import('vue')['triggerRef']
+  const triggerRef: (typeof import("vue"))["triggerRef"];
-  const unref: typeof import('vue')['unref']
+  const unref: (typeof import("vue"))["unref"];
-  const useAttrs: typeof import('vue')['useAttrs']
+  const useAttrs: (typeof import("vue"))["useAttrs"];
-  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssModule: (typeof import("vue"))["useCssModule"];
-  const useCssVars: typeof import('vue')['useCssVars']
+  const useCssVars: (typeof import("vue"))["useCssVars"];
-  const useLink: typeof import('vue-router')['useLink']
+  const useLink: (typeof import("vue-router"))["useLink"];
-  const useRoute: typeof import('vue-router')['useRoute']
+  const useRoute: (typeof import("vue-router"))["useRoute"];
-  const useRouter: typeof import('vue-router')['useRouter']
+  const useRouter: (typeof import("vue-router"))["useRouter"];
-  const useSlots: typeof import('vue')['useSlots']
+  const useSlots: (typeof import("vue"))["useSlots"];
-  const watch: typeof import('vue')['watch']
+  const watch: (typeof import("vue"))["watch"];
-  const watchEffect: typeof import('vue')['watchEffect']
+  const watchEffect: (typeof import("vue"))["watchEffect"];
-  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchPostEffect: (typeof import("vue"))["watchPostEffect"];
-  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+  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'
+  export type {
-  import('vue')
+    Component,
+    ComponentPublicInstance,
+    ComputedRef,
+    ExtractDefaultPropTypes,
+    ExtractPropTypes,
+    ExtractPublicPropTypes,
+    InjectionKey,
+    PropType,
+    Ref,
+    VNode,
+    WritableComputedRef
+  } from "vue";
+  import("vue");
 }

src/components.d.ts

@@ -5,11 +5,11 @@
 // 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']
+    RouterLink: (typeof import("vue-router"))["RouterLink"];
-    RouterView: typeof import('vue-router')['RouterView']
+    RouterView: (typeof import("vue-router"))["RouterView"];
-    SvgIcon: typeof import('./components/SvgIcon/index.vue')['default']
+    SvgIcon: (typeof import("./components/SvgIcon/index.vue"))["default"];
-    VerifyCode: typeof import('./components/VerifyCode/index.vue')['default']
+    VerifyCode: (typeof import("./components/VerifyCode/index.vue"))["default"];
   }
 }

src/components/VerifyCode/index.vue

@@ -11,7 +11,7 @@ const props = defineProps({
   identifyCodes: {
     //验证码从该字段中抽取生成
     type: String,
-    default: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ"
+    default: "1234567890abcdefghijklmnopqrstuvwxyz"
   },
   fontSizeMin: {
     // 字体最小值
@@ -54,7 +54,7 @@ const props = defineProps({
     default: 44
   }
 });
-const emit = defineEmits(["update:changeCode"]);
+const emit = defineEmits(["verifyCodeChange"]);
 const identifyCode = ref("");
 watch(identifyCode, () => {
   drawPic();
@@ -75,9 +75,10 @@ const randomColor = (min: any, max: any) => {
   return "rgb(" + r + "," + g + "," + b + ")";
 };
 const drawPic = () => {
-  let canvas = document.getElementById("s-canvas");
+  let canvas = <HTMLCanvasElement>document.getElementById("s-canvas");
   if (!canvas) return;
   let ctx = canvas.getContext("2d");
+  if (!ctx) return;
   ctx.textBaseline = "bottom";
   // 绘制背景
   ctx.fillStyle = randomColor(props.backgroundColorMin, props.backgroundColorMax);
@@ -131,7 +132,7 @@ const makeCode = (e: any, n: any) => {
   for (let i = 0; i < n; i++) {
     identifyCode.value += e[randomNum(0, e.length)];
   }
-  emit("update:changeCode", identifyCode.value);
+  emit("verifyCodeChange", identifyCode.value);
 };
 /*切换验证码end*/
 </script>

src/layout/components/Header/index.vue

@@ -100,7 +100,7 @@
             </template>
           </a-doption>
           <a-divider margin="0" />
-          <a-doption>
+          <a-doption @click="logOut">
             <template #default>
               <SvgIcon :name="'exit'" :size="18" />
               <span class="margin-left-text">退出登录</span>
@@ -114,6 +114,27 @@
 <script setup lang="ts">
 import Notice from "@/layout/components/Header/components/Notice/index.vue";
 import myImage from "@/assets/img/my-image.jpg";
+import { Modal } from "@arco-design/web-vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
+
+const logOut = () => {
+  Modal.warning({
+    title: "提示",
+    content: "确定退出登录？",
+    hideCancel: false,
+    closable: true,
+    onBeforeOk: () => {
+      try {
+        sessionStorage.removeItem("token");
+        router.replace("/login");
+        return true;
+      } catch {
+        return false;
+      }
+    }
+  });
+};
 </script>
 
 <style lang="scss" scoped>

src/router/index.ts

@@ -1,6 +1,5 @@
 import { createRouter, createWebHashHistory } from "vue-router";
 import { dynamicRoutes, staticRoutes, notFoundAndNoPower } from "@/router/route.ts";
-import { initSetRouter } from "@/router/route-output.ts";
 import NProgress from "@/config/nprogress";
 
 /**
@@ -30,7 +29,7 @@ router.beforeEach(async (to, from, next) => {
   } else if (to.path === "/login" && sessionStorage.getItem("token")) {
     next("/home");
   } else {
-    await initSetRouter();
+    next();
   }
   // if (to.path === "/login" && !sessionStorage.getItem("token")) {
   //   next();

src/views/login/login.vue

@@ -4,20 +4,28 @@
       <div class="banner_box"></div>
       <div class="login_box">
         <div class="login_title">DC Admin</div>
-        <div class="login_title_desc">丰富的的页面模板，覆盖大多数典型业务场景</div>
         <div class="login_title_desc">国际化，路由配置，状态管理应有尽有</div>
+        <div class="login_title_desc">丰富的的页面模板，覆盖大多数典型业务场景</div>
         <div class="login_form_box">
-          <a-form :model="form" layout="vertical">
+          <a-form :rules="rules" :model="form" layout="vertical" @submit="onSubmit">
-            <a-form-item field="username">
+            <a-form-item field="username" :hide-asterisk="true">
-              <a-input v-model="form.username" placeholder="请输入账号" />
+              <a-input v-model="form.username" allow-clear placeholder="请输入账号">
+                <template #prefix>
+                  <icon-user />
+                </template>
+              </a-input>
             </a-form-item>
-            <a-form-item field="password">
+            <a-form-item field="password" :hide-asterisk="true">
-              <a-input v-model="form.password" placeholder="请输入密码" />
+              <a-input-password v-model="form.password" allow-clear placeholder="请输入密码">
+                <template #prefix>
+                  <icon-lock />
+                </template>
+              </a-input-password>
             </a-form-item>
-            <a-form-item field="verifyCode">
+            <a-form-item field="verifyCode" :hide-asterisk="true">
               <div class="verifyCode">
-                <a-input style="width: 160px" v-model="form.verifyCode" placeholder="请输入验证码" />
+                <a-input style="width: 160px" v-model="form.verifyCode" allow-clear placeholder="请输入验证码" />
-                <VerifyCode :content-height="32" :content-width="100" />
+                <VerifyCode :content-height="30" :content-width="100" @verify-code-change="verifyCodeChange" />
               </div>
             </a-form-item>
             <a-form-item field="remember">
@@ -27,7 +35,7 @@
               </div>
             </a-form-item>
             <a-form-item>
-              <a-button long type="primary">登录</a-button>
+              <a-button long type="primary" html-type="submit">登录</a-button>
             </a-form-item>
           </a-form>
         </div>
@@ -39,12 +47,75 @@
 </template>
 
 <script setup lang="ts">
+import { Message } from "@arco-design/web-vue";
+import { useRouter } from "vue-router";
+const router = useRouter();
 const form = ref({
   username: "admin",
   password: "123456",
   verifyCode: null,
   remember: false
 });
+const rules = ref({
+  username: [
+    {
+      required: true,
+      message: "请输入账号"
+    },
+    {
+      validator: (value: string, cb: any) => {
+        if (value !== verify.value.username) {
+          cb("请输入正确的账号");
+        } else {
+          cb();
+        }
+      }
+    }
+  ],
+  password: [
+    {
+      required: true,
+      message: "请输入密码"
+    },
+    {
+      validator: (value: string, cb: any) => {
+        if (value !== verify.value.password) {
+          cb("请输入正确的密码");
+        } else {
+          cb();
+        }
+      }
+    }
+  ],
+  verifyCode: [
+    {
+      required: true,
+      message: "请输入验证码"
+    },
+    {
+      validator: (value: string, cb: any) => {
+        if (value !== verify.value.verifyCode) {
+          cb("请输入正确的验证码");
+        } else {
+          cb();
+        }
+      }
+    }
+  ]
+});
+const verify = ref({
+  username: "admin",
+  password: "123456",
+  verifyCode: ""
+});
+const verifyCodeChange = (code: string) => (verify.value.verifyCode = code);
+
+const onSubmit = ({ errors }: any) => {
+  if (errors) return;
+  sessionStorage.setItem("token", "DC-Admin");
+  Message.success("登录成功");
+  router.push("/home");
+};
 </script>
 
 <style lang="scss" scoped>