From 8c3d81bf63946724f7f6d5a9c7d623e9c509ed2c Mon Sep 17 00:00:00 2001
From: XinWei <2718030729@qq.com>
Date: Wed, 24 Jul 2024 11:15:02 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8D=95=E7=82=B9=E7=99=BB=E5=BD=95=E7=9A=84?=
 =?UTF-8?q?=E7=99=BB=E5=87=BA=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env                            |  2 +-
 src/locales/zh-CN.ts            |  1 +
 src/permission.ts               |  3 +-
 src/router/modules/remaining.ts | 10 +++++
 src/views/Login/Login.vue       | 76 ++++++++++++++-------------------
 src/views/Login/Logout.vue      | 26 +++++++++++
 6 files changed, 72 insertions(+), 46 deletions(-)
 create mode 100644 src/views/Login/Logout.vue

diff --git a/.env b/.env
index b2ad9951..14cc6a8e 100644
--- a/.env
+++ b/.env
@@ -2,7 +2,7 @@
 VITE_APP_TITLE=智慧轮渡大数据平台
 
 # 项目本地运行端口号
-VITE_PORT=82
+VITE_PORT=80
 
 
 # open 运行 npm run dev 时自动打开浏览器
diff --git a/src/locales/zh-CN.ts b/src/locales/zh-CN.ts
index 0721651d..31e88c00 100644
--- a/src/locales/zh-CN.ts
+++ b/src/locales/zh-CN.ts
@@ -151,6 +151,7 @@ export default {
   },
   router: {
     login: '登录',
+    logout: '登出',
     socialLogin: '社交登录',
     home: '首页',
     analysis: '分析页',
diff --git a/src/permission.ts b/src/permission.ts
index d538303b..23fea96b 100644
--- a/src/permission.ts
+++ b/src/permission.ts
@@ -53,7 +53,8 @@ const whiteList = [
   '/auth-redirect',
   '/bind',
   '/register',
-  '/oauthLogin/gitee'
+  '/oauthLogin/gitee',
+  '/logout'
 ]
 
 // 路由加载前
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 989bed96..cdc0a436 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -184,6 +184,16 @@ const remainingRouter: AppRouteRecordRaw[] = [
       noTagsView: true
     }
   },
+  {
+    path: '/logout',
+    component: () => import('@/views/Login/Logout.vue'),
+    name: 'Logout',
+    meta: {
+      hidden: true,
+      title: t('router.logout'),
+      noTagsView: true
+    }
+  },
   {
     path: '/sso',
     component: () => import('@/views/Login/components/SSOLoginCustom.vue'),
diff --git a/src/views/Login/Login.vue b/src/views/Login/Login.vue
index 75a5aa23..7b125988 100644
--- a/src/views/Login/Login.vue
+++ b/src/views/Login/Login.vue
@@ -1,12 +1,7 @@
 <template>
-  <div
-    :class="prefixCls"
-    class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px"
-  >
+  <div :class="prefixCls" class="relative h-[100%] lt-md:px-10px lt-sm:px-10px lt-xl:px-10px lt-xl:px-10px">
     <div class="relative mx-auto h-full flex">
-      <div
-        :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`"
-      >
+      <div :class="`${prefixCls}__left flex-1 bg-gray-500 bg-opacity-20 relative p-30px lt-xl:hidden`">
         <!-- 左上角的 logo + 系统标题 -->
         <div class="relative flex items-center text-white">
           <!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> -->
@@ -14,11 +9,7 @@
         </div>
         <!-- 左边的背景图 + 欢迎语 -->
         <div class="h-[calc(100%-60px)] flex items-center justify-center">
-          <TransitionGroup
-            appear
-            enter-active-class="animate__animated animate__bounceInLeft"
-            tag="div"
-          >
+          <TransitionGroup appear enter-active-class="animate__animated animate__bounceInLeft" tag="div">
             <img key="1" alt="" class="w-350px" src="@/assets/svgs/login-box-bg.svg" />
             <div key="2" class="text-3xl text-white" style="text-align: center;">{{ t('login.welcome') }}</div>
             <!-- <div key="3" class="mt-5 text-14px font-normal text-white">
@@ -29,9 +20,7 @@
       </div>
       <div class="relative flex-1 p-30px dark:bg-[var(--login-bg-color)] lt-sm:p-10px">
         <!-- 右上角的主题、语言选择 -->
-        <div
-          class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end"
-        >
+        <div class="flex items-center justify-between text-white at-2xl:justify-end at-xl:justify-end">
           <div class="flex items-center at-2xl:hidden at-xl:hidden">
             <!-- <img alt="" class="mr-10px h-48px w-48px" src="@/assets/imgs/logo.png" /> -->
             <span class="text-20px font-bold">{{ underlineToHump(appStore.getTitle) }}</span>
@@ -44,8 +33,7 @@
         <!-- 右边的登录界面 -->
         <Transition appear enter-active-class="animate__animated animate__bounceInRight">
           <div
-            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px"
-          >
+            class="m-auto h-full w-[100%] flex items-center at-2xl:max-w-500px at-lg:max-w-500px at-md:max-w-500px at-xl:max-w-500px">
             <!-- 账号登录 -->
             <LoginForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 手机登录 -->
@@ -63,42 +51,42 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { underlineToHump } from '@/utils'
+  import { underlineToHump } from '@/utils'
 
-import { useDesign } from '@/hooks/web/useDesign'
-import { useAppStore } from '@/store/modules/app'
-import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
-import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
+  import { useDesign } from '@/hooks/web/useDesign'
+  import { useAppStore } from '@/store/modules/app'
+  import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
+  import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 
-import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
+  import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
 
-defineOptions({ name: 'Login' })
+  defineOptions({ name: 'Login' })
 
-const { t } = useI18n()
-const appStore = useAppStore()
-const { getPrefixCls } = useDesign()
-const prefixCls = getPrefixCls('login')
+  const { t } = useI18n()
+  const appStore = useAppStore()
+  const { getPrefixCls } = useDesign()
+  const prefixCls = getPrefixCls('login')
 </script>
 
 <style lang="scss" scoped>
-$prefix-cls: #{$namespace}-login;
+  $prefix-cls: #{$namespace}-login;
 
-.#{$prefix-cls} {
-  overflow: auto;
+  .#{$prefix-cls} {
+    overflow: auto;
 
-  &__left {
-    &::before {
-      position: absolute;
-      top: 0;
-      left: 0;
-      z-index: -1;
-      width: 100%;
-      height: 100%;
-      background-image: url('@/assets/svgs/login-bg.svg');
-      background-position: center;
-      background-repeat: no-repeat;
-      content: '';
+    &__left {
+      &::before {
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: -1;
+        width: 100%;
+        height: 100%;
+        background-image: url('@/assets/svgs/login-bg.svg');
+        background-position: center;
+        background-repeat: no-repeat;
+        content: '';
+      }
     }
   }
-}
 </style>
diff --git a/src/views/Login/Logout.vue b/src/views/Login/Logout.vue
new file mode 100644
index 00000000..fc2be454
--- /dev/null
+++ b/src/views/Login/Logout.vue
@@ -0,0 +1,26 @@
+<template>
+  <div v-if="false">正在退出登录......</div>
+</template>
+<script lang="ts" setup>
+  import { ElLoading } from 'element-plus'
+  
+  import { useUserStore } from '@/store/modules/user'
+  import { useTagsViewStore } from '@/store/modules/tagsView'
+  const { replace } = useRouter()
+  const loading = ElLoading.service({
+    lock: true,
+    text: '',
+    background: 'rgba(0, 0, 0, 0.7)',
+  })
+  const loginOut = async () => {
+    try {
+      await useUserStore().loginOut()
+      useTagsViewStore().delAllViews()
+      replace('/login?redirect=/index')
+      loading.close()
+    } catch { }
+  }
+  loginOut()
+
+</script>
+<style lang="scss" scoped></style>
\ No newline at end of file