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('')

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


function search() {
  //todo: search


}

</script>

<template>
  <div class="bg-primary-500 min-w-full top-0 shadow-md flex-shrink-0 rounded-b-xl">

    <div class="mx-4 p-4">

      <div class="flex items-center justify-between space-x-4">

        <div class="flex items-center">
          <router-link to="/home" v-slot="{navigate}">
            <h1 @click="navigate" class="text-xl text-white"> 蓝鲸在线购物 </h1>
          </router-link>
        </div>

        <div class="w-3/4">
          <form>
            <div class="relative">

              <!--网上抄的logo-->
              <div class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none">
                <svg class="w-4 h-4 text-gray-500 dark:text-gray-400" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20">
                  <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m19 19-4-4m0-7A7 7 0 1 1 1 8a7 7 0 0 1 14 0Z"/>
                </svg>
              </div>

              <input type="search" id="search"
                     v-model="searchContent"
                     class="block w-full p-4 ps-10 text-gray-900 border border-gray-300 rounded-3xl bg-gray-50 focus:ring-blue-500 focus:border-blue-500" placeholder="国货好物" required>
              <button type="submit" @click="search"
                      class="text-white absolute end-5 bottom-2.5 bg-primary-600 hover:bg-primary-700 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-3xl text-sm px-4 py-2">搜索商品</button>
            </div>
          </form>
        </div>



        <div class="flex items-center space-x-4 mx-3">
          <router-link to="/manager/createStore" v-slot="{navigate}">
            <el-icon @click="navigate" :size="30" color="white" ><CirclePlus /></el-icon>
          </router-link>

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

          <a @click="logout" class="hover:cursor-pointer">
            <el-icon :size="30" color="white" ><SwitchButton /></el-icon>
          </a>


        </div>

      </div>
    </div>
  </div>
</template>

<style>

.customDialog {
  @apply w-1/4 space-y-5 text-4xl font-semibold rounded-2xl pb-5 pt-2
}

</style>

<style scoped>
</style>