提交代码

src/layout/components/NavBar.vue

@@ -0,0 +1,101 @@
+<template>
+  <el-dropdown class="avatar-container" trigger="click">
+    <div class="avatar-wrapper">
+      <el-avatar
+        shape="circle"
+        :size="28"
+        :src="require('@/assets/images/ly-person-icon.png')"
+      ></el-avatar>
+    </div>
+    <template #dropdown>
+      <el-dropdown-menu class="user-dropdown">
+        <el-dropdown-item divided @click="logout()">退出登录</el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+  <UpdatePwdDialog v-model="UpdatePwdVisible"></UpdatePwdDialog>
+</template>
+
+<script setup>
+import { useRouter, useRoute,onBeforeRouteLeave } from "vue-router";
+import { ref } from "vue";
+import { useStore } from "vuex";
+import UpdatePwdDialog from "./UpdatePwdDialog.vue";
+const UpdatePwdVisible = ref(false);
+const updatePwd = () => {
+  UpdatePwdVisible.value = true;
+};
+const store = useStore();
+
+const logout = () => {
+  store.dispatch("user/logout");
+  store.commit("app/clearTag", null, {
+    immediate: true
+  });
+  store.commit("permission/deleteRouter", {
+    immediate: true
+  });
+};
+</script>
+
+<style lang="scss" scoped>
+.navbar {
+  height: 50px;
+  overflow: hidden;
+  position: relative;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  .hamburger-container {
+    line-height: 46px;
+    height: 100%;
+    float: left;
+    cursor: pointer;
+    // hover 动画
+    transition: background 0.5s;
+    &:hover {
+      background: rgba(0, 0, 0, 0.1);
+    }
+  }
+
+  .breadcrumb-container {
+    float: left;
+  }
+
+  .right-menu {
+    display: flex;
+    align-items: center;
+    float: right;
+    padding-right: 16px;
+
+    ::v-deep .right-menu-item {
+      display: inline-block;
+      padding: 0 18px 0 0;
+      font-size: 24px;
+      color: #5a5e66;
+      vertical-align: text-bottom;
+
+      &.hover-effect {
+        cursor: pointer;
+        transition: background 0.3s;
+
+        &:hover {
+          background: rgba(0, 0, 0, 0.025);
+        }
+      }
+    }
+
+    ::v-deep .avatar-container {
+      cursor: pointer;
+      .avatar-wrapper {
+        margin-top: 5px;
+        position: relative;
+        .el-avatar {
+          --el-avatar-background-color: none;
+          margin-right: 12px;
+        }
+      }
+    }
+  }
+}
+</style>