BlueWhale-Frontend/src/components/Header.vue

<script setup lang="ts">
import {CirclePlus, UserFilled, SwitchButton} from "@element-plus/icons-vue";
import {ref} from 'vue';
import {router} from '../router'

// const searchContent = ref('')


const userName = ref()
userName.value = sessionStorage.getItem("name")


function logout() {
  ElMessageBox.confirm(
      '是否要退出登录？',
      '提示',
      {
        customClass: "customDialog",
        confirmButtonText: '是',
        cancelButtonText: '否',
        type: "warning",
        showClose: false,
        roundButton: true,
        center: true
      }
  ).then(() => {
    sessionStorage.setItem('token', '')
    router.push({path: "/login"})
  }).catch(() => {
    // do nothing
  })
}


function search() {
  //todo: search


}

</script>

<template>

  <el-header class="customHeader" height="20">

    <el-row :gutter="20" :justify="'space-between'">
      <el-col :span="4">
        <router-link to="/allStore" v-slot="{navigate}">
          <h1 @click="navigate" class="text-xl text-white"> 蓝鲸在线购物 </h1>
        </router-link>
      </el-col>

      <el-col :span="10">

      </el-col>

      <el-col :span="2">
        <span> {{ userName }}</span>
      </el-col>

      <el-col :span="2">
        <router-link to="/manager/createStore" v-slot="{navigate}">
          <el-icon @click="navigate" :size="30" color="white" ><CirclePlus /></el-icon>
        </router-link>
      </el-col>

      <el-col :span="2">
        <router-link to="/dashboard" v-slot="{navigate}">
          <el-icon @click="navigate" :size="30" color="white" ><UserFilled /></el-icon>
        </router-link>
      </el-col>

      <el-col :span="2">
        <a @click="logout">
          <el-icon :size="30" color="white" ><SwitchButton /></el-icon>
        </a>
      </el-col>

    </el-row>



  </el-header>
</template>


<style scoped>

.customHeader {
  background-color: #79bbff;
}

</style>