web_dist/src/layout/HeaderV2/ToolInfoBar.vue

<template>
    <div class="tool_info_bar">
        <!--    -->
        <!-- 快捷功能按钮 -->
        <div class="function-list">

            <div class="function-list-item" style="width:max-content">
                <scroll-notifications/>
            </div>
            <div class="function-list-item">
                <Download/>
            </div>
            <div class="function-list-item">
                <Message/>
            </div>
            <div class="function-list-item" id="tutorial_full_screen">
                <Full-screen/>
            </div>
            <div class="function-list-item">
                <SizeChange/>
            </div>
            <div class="function-list-item">
                <theme/>
            </div>
            <div class="function-list-item" style="width: auto; margin-left: 6px;padding: 0 6px" id="tutorial_user_info">
                <user-info @password="showPasswordLayer" @loginOut="loginOut"/>
            </div>
        </div>
        <!-- 修改密码 -->
        <password-layer v-if="layer.show" :layer="layer"/>
    </div>
</template>

<script setup name='ToolInfoBar' lang="ts">
import {reactive} from 'vue'
import {useStore} from 'vuex'
import Download from './function-list/Download.vue'
import Message from './function-list/Message.vue'
import FullScreen from './function-list/Fullscreen.vue'
import SizeChange from './function-list/SizeChange.vue'
import PasswordLayer from './PasswordLayer.vue'
import UserInfo from "./function-list/user-info/UserInfo.vue";
import ScrollNotifications from "./ScrollNotifications.vue";
import Theme from "./function-list/Theme.vue";


const store = useStore()

const layer = reactive({
    show: false,
    showButton: true,
})

const showPasswordLayer = () => {
    layer.show = true
}

const loginOut = () => {
    store.dispatch('user/loginOut')
}

</script>

<style scoped lang="scss">
.tool_info_bar {
  height: 100%;
  display: flex;
  width: 100%;
}

.scroll-notifications {
  justify-content: center;
  align-items: center;
  display: flex;

  i {
    margin: 0 7px;
  }

  &:hover {
    cursor: pointer;
    background-color: rgb(245, 245, 245);
  }
}

.function-list {
  display: flex;

  .function-list-item {
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;

    &:hover {
      cursor: pointer;
      background-color: rgb(245, 245, 245);
    }

    :deep(i) {
      color: var(--system-header-text-color);
    }
  }
}

.user-info {
  margin-left: 20px;
  display: flex;
  justify-content: center;
  align-items: center;

  .el-dropdown-link {
    color: var(--system-header-breadcrumb-text-color);
  }
}

</style>