1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192 |
- <template>
- <header class="header-bar">
- <slot name="header-plugin"></slot>
- <slot name="header-user">
- <div class="header-user">
- <cip-dropdown @command="handleCommand" :disabled="!($slots.dropdown || $slots['pre-dropdown'])">
- <cip-avatar size="small"/>
- <span class="account-name">{{accountInfo.userName}} </span>
- <template #dropdown>
- <el-dropdown-menu>
- <slot name="pre-dropdown"></slot>
- <slot name="dropdown" />
- </el-dropdown-menu>
- </template>
- </cip-dropdown>
- <span class="header-bar__logout" @click="()=>handleCommand('logout')">退出</span>
- </div>
- </slot>
- </header>
- </template>
- <script>
- import { ElDropdownMenu } from 'element-plus'
- import CipDropdown from '../../cip-dropdown'
- import CipAvatar from '../../cip-avatar'
- import { computed } from 'vue'
- import { Token } from '@/lib/token'
- import { useRouter } from 'vue-router'
- // import { accountService } from '@/api'
- import store from '../../store'
- import { useCipConfig } from '@cip/components/hooks/use-cip-config'
- export default {
- name: 'CipHeaderBar',
- components: {
- CipDropdown, CipAvatar, ElDropdownMenu
- },
- setup (props, { slots }) {
- // const store = useStore()
- const cipConfig = useCipConfig()
- const router = useRouter()
- const accountInfo = computed(() => {
- return store.state.accountInfo || {}
- })
- const handleCommand = (command) => {
- if (command === 'logout') {
- if (cipConfig.logout) {
- cipConfig.logout()
- } else {
- Token.remove()
- location.href = `${router.options.history.base}/login`
- }
- }
- }
- return { accountInfo, handleCommand }
- }
- }
- </script>
- <style lang="less">
- .main-framework__header{
- .header-bar{
- height: 100%;
- display: flex;
- align-items: center;
- justify-content: flex-end;
- padding: 0 32px 0 64px;
- margin-left: auto;
- }
- .account-name{
- cursor: pointer;
- margin-left: 8px;
- //font-weight: bold;
- }
- .header-user{
- display: flex;
- align-items: center;
- font-size: 14px;
- height: 100%;
- .@{elNamespace}-dropdown{
- height: 100%;
- }
- .header-bar__logout{
- padding-left: 12px;
- margin-left: 12px;
- border-left: 1px solid transparent;
- line-height: 1em;
- cursor: pointer;
- user-select: none;
- }
- }
- }
- </style>
|