🐛头像组件支持配置，移除个人中心

mock/controller/router.js

@@ -16,22 +16,6 @@ const data = [
       },
     ],
   },
-  {
-    path: "/personalCenter",
-    component: "Layout",
-    hidden: true,
-    redirect: "personalCenter",
-    children: [
-      {
-        path: "personalCenter",
-        name: "PersonalCenter",
-        component: "@/views/personalCenter/index",
-        meta: {
-          title: "个人中心",
-        },
-      },
-    ],
-  },
   {
     path: "/personnelManagement",
     component: "Layout",

src/layouts/components/Avatar/index.vue

@@ -0,0 +1,90 @@
+<template>
+  <el-dropdown @command="handleCommand">
+    <span class="avatar-dropdown">
+      <!--<el-avatar class="user-avatar" :src="avatar"></el-avatar>-->
+      <img class="user-avatar" :src="avatar" alt="" />
+      <div class="user-name">
+        {{ username }}
+        <i class="el-icon-arrow-down el-icon--right"></i>
+      </div>
+    </span>
+
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="logout" divided>
+        <vab-icon :icon="['fas', 'sign-out-alt']"></vab-icon>
+        退出登录
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+  import { mapGetters } from "vuex";
+  import { recordRoute } from "@/config/settings";
+
+  export default {
+    name: "Avatar",
+    computed: {
+      ...mapGetters({
+        avatar: "user/avatar",
+        username: "user/username",
+      }),
+    },
+    methods: {
+      handleCommand(command) {
+        switch (command) {
+          case "logout":
+            this.logout();
+            break;
+          case "personalCenter":
+            this.personalCenter();
+            break;
+        }
+      },
+      personalCenter() {
+        this.$router.push("/personalCenter/personalCenter");
+      },
+      logout() {
+        this.$baseConfirm(
+          "您确定要退出" + this.$baseTitle + "吗?",
+          null,
+          async () => {
+            await this.$store.dispatch("user/logout");
+            if (recordRoute) {
+              const fullPath = this.$route.fullPath;
+              this.$router.push(`/login?redirect=${fullPath}`);
+            } else {
+              this.$router.push("/login");
+            }
+          }
+        );
+      },
+    },
+  };
+</script>
+<style lang="scss" scoped>
+  .avatar-dropdown {
+    display: flex;
+    align-content: center;
+    align-items: center;
+    justify-content: center;
+    justify-items: center;
+    height: 50px;
+    padding: 0;
+
+    .user-avatar {
+      width: 40px;
+      height: 40px;
+      cursor: pointer;
+      border-radius: 50%;
+    }
+
+    .user-name {
+      position: relative;
+      margin-left: 5px;
+      margin-left: 5px;
+      font-weight: 600;
+      cursor: pointer;
+    }
+  }
+</style>

src/layouts/components/index.js

@@ -8,7 +8,7 @@ export { default as VabDrag } from "zx-layouts/Drag";
 export { default as VabPermissions } from "zx-layouts/Permissions";
 export { default as VabQueryForm } from "zx-layouts/VabQueryForm/export";
 export { default as Logo } from "./Logo";
-export { default as Avatar } from "zx-layouts/Avatar";
+export { default as Avatar } from "./Avatar";
 export { default as Ad } from "./Ad";
 export { default as AppMain } from "zx-layouts/AppMain";
 export { default as TabsBar } from "zx-layouts/TabsBar";

src/router/index.js

@@ -53,22 +53,6 @@ export const asyncRoutes = [
       },
     ],
   },
-  {
-    path: "/personalCenter",
-    component: Layout,
-    hidden: true,
-    redirect: "personalCenter",
-    children: [
-      {
-        path: "personalCenter",
-        name: "PersonalCenter",
-        component: () => import("@/views/personalCenter/index"),
-        meta: {
-          title: "个人中心",
-        },
-      },
-    ],
-  },
   /* {
     path: "/test",
     component: Layout,