shuiwu/src/components/layout/modules/header.vue

<template>
  <div class="sw-header">
    <a-space>
      <div style="width:216px">
        <img height="30" src="@/assets/LOGO.svg" alt="">
      </div>
      <weather/>
    </a-space>
    <div>
      <a-space>
        <QuestionCircleOutlined :style="{marginRight:'16px',color:'#fff',fontSize:'16px',cursor: 'pointer'}"/>
        <BellOutlined :style="{marginRight:'24px',color:'#fff',fontSize:'16px',cursor: 'pointer'}"/>
        <a-dropdown class="dropdown-link">
            <a class="ant-dropdown-link" @click.prevent>
              <a-avatar size="small">
                <template #icon><UserOutlined /></template>
              </a-avatar>
              {{nowAccount.sitename}}
              <DownOutlined />
            </a>
            <template #overlay>
              <a-menu>
                <a-menu-item v-for="item in accountList" :key="item.index">
                  <a @click="accountItemClick(item,false)">{{item.sitename + '-' + item.name}}</a>
                </a-menu-item>
                <a-menu-divider />
                <a-menu-item>
                  <LogoutOutlined />
                  <a class="color-red" @click="loginOut">&nbsp;退出登录</a>
                </a-menu-item>
              </a-menu>
            </template>
        </a-dropdown>
      </a-space>
      </div>
  </div>
</template>

<script setup>
import {ref,createVNode} from 'vue'
import { UserOutlined, DownOutlined,BellOutlined,QuestionCircleOutlined, LogoutOutlined,ExclamationCircleOutlined} from '@ant-design/icons-vue';
import { useAuthStore } from '@/stores/modules/auth'
import { useRouteTabsStore } from '@/stores/modules/Htabs'
import { storeToRefs } from 'pinia'
import { Modal } from 'ant-design-vue';
import weather from '@/components/weather/index.vue'
import { useRouter } from "vue-router";
const router = useRouter()
import Api from '@/api/api'

const store = useAuthStore()
let { accountList,nowAccount } = storeToRefs(store)

const rotTabs = useRouteTabsStore()
let {historyRoutes} = storeToRefs(rotTabs)
const accountItemClick = (account,bool)=>{
  store.defaultAccount(account,()=>{
    store.reloadPage()
    historyRoutes.value = []
  })
}
const loginOut = ()=>{
  Modal.confirm({
    title: '注意',
    icon: createVNode(ExclamationCircleOutlined),
    content: '确定登出当前账号吗?',
    okText: '确认',
    cancelText: '取消',
    onOk () {
      historyRoutes.value = []
      Api.loginout({})
      router.push({path:'/'})
    }
  });
}
</script>
<style scoped>
.sw-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding:0 32px 0 16px;
}
.ant-dropdown-link{
  color:#fff;

}
</style>