feat: 退出登录功能

罗广辉

2025-03-31 b6bbb9caa5b25320e65220e37887f5b699a7eb00

feat: 退出登录功能

 src/components/UserOperate.vue

@@ -1,12 +1,43 @@
<script setup>
import { fullscreenToggel } from '@/utils/util';
import { useStore } from 'vuex';
const router = useRouter();
const store = useStore();
const dropdownClick = val => {
  if (val === 'info'){
    info()
  }else if (val === 'logOut'){
    logOut()
  }
};

const logOut = () =>{
  store.commit('SET_THEME_NAME', '');
  store.dispatch('LogOut').then(() => {
    router.push({ path: '/login' });
    setTimeout(() => location.reload());
  });
}

const info = () =>{
  console.log('点击了个人信息');
}
</script>

<template>
  <div class="userOperate">
    <img alt="" src="@/assets/images/home/homeRight/operate1.png" />
    <img alt="" src="@/assets/images/home/homeRight/operate2.png" />
    <img alt="" src="@/assets/images/home/homeRight/operate3.png"  @click="fullscreenToggel"/>
    <img alt="" src="@/assets/images/home/homeRight/operate1.png" title="进入后台"/>

    <el-dropdown @command="dropdownClick">
      <img alt="" src="@/assets/images/home/homeRight/operate2.png"/>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item command="info">个人信息</el-dropdown-item>
          <el-dropdown-item command="logOut">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
    <img alt="" src="@/assets/images/home/homeRight/operate3.png" @click="fullscreenToggel" title="全屏切换"/>
  </div>
</template>