vben
5 years ago
80 changed files with 1335 additions and 969 deletions
@ -1,96 +0,0 @@ |
|||||
import type { Menu as MenuType } from '/@/router/types'; |
|
||||
import type { PropType } from 'vue'; |
|
||||
import { computed, unref } from 'vue'; |
|
||||
|
|
||||
import { defineComponent } from 'vue'; |
|
||||
import Icon from '/@/components/Icon/index'; |
|
||||
import { useI18n } from '/@/hooks/web/useI18n'; |
|
||||
import { useDesign } from '/@/hooks/web/useDesign'; |
|
||||
|
|
||||
const { t } = useI18n(); |
|
||||
|
|
||||
export default defineComponent({ |
|
||||
name: 'MenuContent', |
|
||||
props: { |
|
||||
item: { |
|
||||
type: Object as PropType<MenuType>, |
|
||||
default: null, |
|
||||
}, |
|
||||
showTitle: { |
|
||||
type: Boolean as PropType<boolean>, |
|
||||
default: true, |
|
||||
}, |
|
||||
level: { |
|
||||
type: Number as PropType<number>, |
|
||||
default: 0, |
|
||||
}, |
|
||||
isHorizontal: { |
|
||||
type: Boolean as PropType<boolean>, |
|
||||
default: true, |
|
||||
}, |
|
||||
}, |
|
||||
setup(props) { |
|
||||
const { prefixCls } = useDesign('basic-menu'); |
|
||||
|
|
||||
const getI18nName = computed(() => t(props.item?.name)); |
|
||||
|
|
||||
const getTagClass = computed(() => { |
|
||||
const { item } = props; |
|
||||
const { tag = {} } = item || {}; |
|
||||
const { dot, type = 'error' } = tag; |
|
||||
return [ |
|
||||
`${prefixCls}__tag`, |
|
||||
type, |
|
||||
{ |
|
||||
dot, |
|
||||
}, |
|
||||
]; |
|
||||
}); |
|
||||
|
|
||||
const getNameClass = computed(() => { |
|
||||
const { showTitle } = props; |
|
||||
return { [`${prefixCls}--show-title`]: showTitle, [`${prefixCls}__name`]: !showTitle }; |
|
||||
}); |
|
||||
|
|
||||
/** |
|
||||
* @description: 渲染图标 |
|
||||
*/ |
|
||||
function renderIcon(icon?: string) { |
|
||||
return icon ? <Icon icon={icon} size={18} class="menu-item-icon" /> : null; |
|
||||
} |
|
||||
|
|
||||
function renderTag() { |
|
||||
const { item, showTitle, isHorizontal } = props; |
|
||||
if (!item || showTitle || isHorizontal) return null; |
|
||||
|
|
||||
const { tag } = item; |
|
||||
if (!tag) return null; |
|
||||
|
|
||||
const { dot, content } = tag; |
|
||||
if (!dot && !content) return null; |
|
||||
|
|
||||
return <span class={unref(getTagClass)}>{dot ? '' : content}</span>; |
|
||||
} |
|
||||
|
|
||||
return () => { |
|
||||
const { item } = props; |
|
||||
if (!item) { |
|
||||
return null; |
|
||||
} |
|
||||
const { icon } = item; |
|
||||
const name = unref(getI18nName); |
|
||||
|
|
||||
return ( |
|
||||
<span class={`${prefixCls}__content-wrapper`}> |
|
||||
{renderIcon(icon)} |
|
||||
{ |
|
||||
<span class={unref(getNameClass)}> |
|
||||
{name} |
|
||||
{renderTag()} |
|
||||
</span> |
|
||||
} |
|
||||
</span> |
|
||||
); |
|
||||
}; |
|
||||
}, |
|
||||
}); |
|
||||
@ -0,0 +1,41 @@ |
|||||
|
<template> |
||||
|
<span :class="`${prefixCls}-wrapper`"> |
||||
|
<Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon`" /> |
||||
|
<span :class="getNameClass"> |
||||
|
{{ getI18nName }} |
||||
|
<MenuItemTag v-bind="$props" /> |
||||
|
</span> |
||||
|
</span> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { computed, defineComponent } from 'vue'; |
||||
|
|
||||
|
import Icon from '/@/components/Icon/index'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
import { contentProps } from '../props'; |
||||
|
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; |
||||
|
const { t } = useI18n(); |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'MenuItemContent', |
||||
|
components: { Icon, MenuItemTag: createAsyncComponent(() => import('./MenuItemTag.vue')) }, |
||||
|
props: contentProps, |
||||
|
setup(props) { |
||||
|
const { prefixCls } = useDesign('basic-menu-item-content'); |
||||
|
const getI18nName = computed(() => t(props.item?.name)); |
||||
|
const getIcon = computed(() => props.item?.icon); |
||||
|
|
||||
|
const getNameClass = computed(() => { |
||||
|
const { showTitle } = props; |
||||
|
return { [`${prefixCls}--show-title`]: showTitle, [`${prefixCls}__name`]: !showTitle }; |
||||
|
}); |
||||
|
return { |
||||
|
prefixCls, |
||||
|
getNameClass, |
||||
|
getI18nName, |
||||
|
getIcon, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,56 @@ |
|||||
|
<template> |
||||
|
<span :class="getTagClass" v-if="getShowTag">{{ getContent }}</span> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, computed } from 'vue'; |
||||
|
|
||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
import { contentProps } from '../props'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'MenuItemTag', |
||||
|
props: contentProps, |
||||
|
setup(props) { |
||||
|
const { prefixCls } = useDesign('basic-menu-item-tag'); |
||||
|
|
||||
|
const getShowTag = computed(() => { |
||||
|
const { item, showTitle, isHorizontal } = props; |
||||
|
if (!item || showTitle || isHorizontal) return false; |
||||
|
|
||||
|
const { tag } = item; |
||||
|
if (!tag) return false; |
||||
|
|
||||
|
const { dot, content } = tag; |
||||
|
if (!dot && !content) return false; |
||||
|
return true; |
||||
|
}); |
||||
|
|
||||
|
const getContent = computed(() => { |
||||
|
if (!getShowTag.value) return ''; |
||||
|
const { item } = props; |
||||
|
const { tag } = item; |
||||
|
const { dot, content } = tag!; |
||||
|
return dot ? '' : content; |
||||
|
}); |
||||
|
|
||||
|
const getTagClass = computed(() => { |
||||
|
const { item } = props; |
||||
|
const { tag = {} } = item || {}; |
||||
|
const { dot, type = 'error' } = tag; |
||||
|
return [ |
||||
|
prefixCls, |
||||
|
[`${prefixCls}--${type}`], |
||||
|
{ |
||||
|
[`${prefixCls}--dot`]: dot, |
||||
|
}, |
||||
|
]; |
||||
|
}); |
||||
|
return { |
||||
|
prefixCls, |
||||
|
getTagClass, |
||||
|
getShowTag, |
||||
|
getContent, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,10 @@ |
|||||
|
import { useAppProviderContext } from '/@/components/Application'; |
||||
|
import { computed, unref } from 'vue'; |
||||
|
|
||||
|
export function useAppInject() { |
||||
|
const values = useAppProviderContext(); |
||||
|
|
||||
|
return { |
||||
|
getIsMobile: computed(() => unref(values.isMobile)), |
||||
|
}; |
||||
|
} |
||||
@ -1,125 +0,0 @@ |
|||||
// components
|
|
||||
import { Dropdown, Menu } from 'ant-design-vue'; |
|
||||
|
|
||||
import { defineComponent, computed, unref } from 'vue'; |
|
||||
|
|
||||
// res
|
|
||||
import headerImg from '/@/assets/images/header.jpg'; |
|
||||
|
|
||||
import Icon from '/@/components/Icon/index'; |
|
||||
|
|
||||
import { userStore } from '/@/store/modules/user'; |
|
||||
|
|
||||
import { DOC_URL } from '/@/settings/siteSetting'; |
|
||||
|
|
||||
import { openWindow } from '/@/utils'; |
|
||||
|
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
|
||||
import { FunctionalComponent } from 'vue'; |
|
||||
import { useI18n } from '/@/hooks/web/useI18n'; |
|
||||
|
|
||||
type MenuEvent = 'loginOut' | 'doc'; |
|
||||
interface MenuItemProps { |
|
||||
icon: string; |
|
||||
text: string; |
|
||||
key: MenuEvent; |
|
||||
} |
|
||||
|
|
||||
const prefixCls = 'user-dropdown'; |
|
||||
|
|
||||
const MenuItem: FunctionalComponent<MenuItemProps> = (props) => { |
|
||||
const { key, icon, text } = props; |
|
||||
return ( |
|
||||
<Menu.Item key={key}> |
|
||||
{() => ( |
|
||||
<span class="flex items-center"> |
|
||||
<Icon icon={icon} class="mr-1" /> |
|
||||
<span>{text}</span> |
|
||||
</span> |
|
||||
)} |
|
||||
</Menu.Item> |
|
||||
); |
|
||||
}; |
|
||||
|
|
||||
export default defineComponent({ |
|
||||
name: 'UserDropdown', |
|
||||
setup() { |
|
||||
const { t } = useI18n(); |
|
||||
const { getShowDoc } = useHeaderSetting(); |
|
||||
|
|
||||
const getUserInfo = computed(() => { |
|
||||
const { realName = '', desc } = userStore.getUserInfoState || {}; |
|
||||
return { realName, desc }; |
|
||||
}); |
|
||||
|
|
||||
// login out
|
|
||||
function handleLoginOut() { |
|
||||
userStore.confirmLoginOut(); |
|
||||
} |
|
||||
|
|
||||
// open doc
|
|
||||
function openDoc() { |
|
||||
openWindow(DOC_URL); |
|
||||
} |
|
||||
|
|
||||
function handleMenuClick(e: { key: MenuEvent }) { |
|
||||
switch (e.key) { |
|
||||
case 'loginOut': |
|
||||
handleLoginOut(); |
|
||||
break; |
|
||||
case 'doc': |
|
||||
openDoc(); |
|
||||
break; |
|
||||
} |
|
||||
} |
|
||||
|
|
||||
function renderSlotsDefault() { |
|
||||
const { realName } = unref(getUserInfo); |
|
||||
return ( |
|
||||
<section class={prefixCls}> |
|
||||
<img class={`${prefixCls}__header`} src={headerImg} /> |
|
||||
<section class={`${prefixCls}__info`}> |
|
||||
<section class={`${prefixCls}__name`}>{realName}</section> |
|
||||
</section> |
|
||||
</section> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
function renderSlotOverlay() { |
|
||||
const showDoc = unref(getShowDoc); |
|
||||
return ( |
|
||||
<Menu onClick={handleMenuClick}> |
|
||||
{() => ( |
|
||||
<> |
|
||||
{showDoc && ( |
|
||||
<MenuItem |
|
||||
key="doc" |
|
||||
text={t('layout.header.dropdownItemDoc')} |
|
||||
icon="gg:loadbar-doc" |
|
||||
/> |
|
||||
)} |
|
||||
{/* @ts-ignore */} |
|
||||
{showDoc && <Menu.Divider />} |
|
||||
<MenuItem |
|
||||
key="loginOut" |
|
||||
text={t('layout.header.dropdownItemLoginOut')} |
|
||||
icon="carbon:power" |
|
||||
/> |
|
||||
</> |
|
||||
)} |
|
||||
</Menu> |
|
||||
); |
|
||||
} |
|
||||
|
|
||||
return () => { |
|
||||
return ( |
|
||||
<Dropdown placement="bottomLeft" overlayClassName="app-layout-header-user-dropdown-overlay"> |
|
||||
{{ |
|
||||
default: () => renderSlotsDefault(), |
|
||||
overlay: () => renderSlotOverlay(), |
|
||||
}} |
|
||||
</Dropdown> |
|
||||
); |
|
||||
}; |
|
||||
}, |
|
||||
}); |
|
||||
@ -0,0 +1,47 @@ |
|||||
|
<template> |
||||
|
<Tooltip |
||||
|
:title="t('layout.header.tooltipErrorLog')" |
||||
|
placement="bottom" |
||||
|
:mouseEnterDelay="0.5" |
||||
|
@click="handleToErrorList" |
||||
|
> |
||||
|
<Badge :count="getCount" :offset="[0, 10]" dot :overflowCount="99"> |
||||
|
<BugOutlined /> |
||||
|
</Badge> |
||||
|
</Tooltip> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, computed } from 'vue'; |
||||
|
import { Tooltip, Badge } from 'ant-design-vue'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
import { BugOutlined } from '@ant-design/icons-vue'; |
||||
|
import { errorStore } from '/@/store/modules/error'; |
||||
|
import { PageEnum } from '/@/enums/pageEnum'; |
||||
|
import { useRouter } from 'vue-router'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'ErrorAction', |
||||
|
components: { BugOutlined, Tooltip, Badge }, |
||||
|
|
||||
|
setup() { |
||||
|
const { t } = useI18n(); |
||||
|
const { push } = useRouter(); |
||||
|
|
||||
|
const getCount = computed(() => { |
||||
|
return errorStore.getErrorListCountState; |
||||
|
}); |
||||
|
|
||||
|
function handleToErrorList() { |
||||
|
push(PageEnum.ERROR_LOG_PAGE).then(() => { |
||||
|
errorStore.commitErrorListCountState(0); |
||||
|
}); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
t, |
||||
|
getCount, |
||||
|
handleToErrorList, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,36 @@ |
|||||
|
<template> |
||||
|
<Tooltip :title="getTitle" placement="bottom" :mouseEnterDelay="0.5"> |
||||
|
<span @click="toggleFullscreen"> |
||||
|
<FullscreenOutlined v-if="!isFullscreen" /> |
||||
|
<FullscreenExitOutlined v-else /> |
||||
|
</span> |
||||
|
</Tooltip> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, computed, unref } from 'vue'; |
||||
|
import { Tooltip } from 'ant-design-vue'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
import { useFullscreen } from '/@/hooks/web/useFullScreen'; |
||||
|
import { FullscreenExitOutlined, FullscreenOutlined } from '@ant-design/icons-vue'; |
||||
|
export default defineComponent({ |
||||
|
name: 'FullScreen', |
||||
|
components: { FullscreenExitOutlined, FullscreenOutlined, Tooltip }, |
||||
|
|
||||
|
setup() { |
||||
|
const { t } = useI18n(); |
||||
|
const { toggleFullscreen, isFullscreenRef } = useFullscreen(); |
||||
|
|
||||
|
const getTitle = computed(() => { |
||||
|
return unref(isFullscreenRef) |
||||
|
? t('layout.header.tooltipExitFull') |
||||
|
: t('layout.header.tooltipEntryFull'); |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
getTitle, |
||||
|
isFullscreen: isFullscreenRef, |
||||
|
toggleFullscreen, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,15 @@ |
|||||
|
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; |
||||
|
|
||||
|
export const UserDropDown = createAsyncComponent(() => import('./user-dropdown/index.vue'), { |
||||
|
loading: true, |
||||
|
}); |
||||
|
|
||||
|
export const LayoutBreadcrumb = createAsyncComponent(() => import('./Breadcrumb.vue')); |
||||
|
|
||||
|
export const FullScreen = createAsyncComponent(() => import('./FullScreen.vue')); |
||||
|
|
||||
|
export const Notify = createAsyncComponent(() => import('./notify/index.vue')); |
||||
|
|
||||
|
export const LockItem = createAsyncComponent(() => import('./lock/index.vue')); |
||||
|
|
||||
|
export const ErrorAction = createAsyncComponent(() => import('./ErrorAction.vue')); |
||||
@ -0,0 +1,116 @@ |
|||||
|
<template> |
||||
|
<BasicModal |
||||
|
:footer="null" |
||||
|
:title="t('layout.header.lockScreen')" |
||||
|
v-bind="$attrs" |
||||
|
:class="prefixCls" |
||||
|
@register="register" |
||||
|
> |
||||
|
<div :class="`${prefixCls}__entry`"> |
||||
|
<div :class="`${prefixCls}__header`"> |
||||
|
<img src="/@/assets/images/header.jpg" :class="`${prefixCls}__header-img`" /> |
||||
|
<p :class="`${prefixCls}__header-name`">{{ getRealName }}</p> |
||||
|
</div> |
||||
|
|
||||
|
<BasicForm @register="registerForm" layout="vertical" /> |
||||
|
|
||||
|
<div :class="`${prefixCls}__footer`"> |
||||
|
<a-button type="primary" block class="mt-2" @click="handleLock"> |
||||
|
{{ t('layout.header.lockScreenBtn') }} |
||||
|
</a-button> |
||||
|
</div> |
||||
|
</div> |
||||
|
</BasicModal> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, computed } from 'vue'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
import { BasicModal, useModalInner } from '/@/components/Modal/index'; |
||||
|
import { BasicForm, useForm } from '/@/components/Form/index'; |
||||
|
|
||||
|
import { userStore } from '/@/store/modules/user'; |
||||
|
import { lockStore } from '/@/store/modules/lock'; |
||||
|
export default defineComponent({ |
||||
|
name: 'LockModal', |
||||
|
components: { BasicModal, BasicForm }, |
||||
|
|
||||
|
setup() { |
||||
|
const { t } = useI18n(); |
||||
|
const { prefixCls } = useDesign('header-lock-modal'); |
||||
|
|
||||
|
const getRealName = computed(() => { |
||||
|
return userStore.getUserInfoState?.realName; |
||||
|
}); |
||||
|
const [register, { closeModal }] = useModalInner(); |
||||
|
|
||||
|
const [registerForm, { validateFields, resetFields }] = useForm({ |
||||
|
showActionButtonGroup: false, |
||||
|
schemas: [ |
||||
|
{ |
||||
|
field: 'password', |
||||
|
label: t('layout.header.lockScreenPassword'), |
||||
|
component: 'InputPassword', |
||||
|
required: true, |
||||
|
}, |
||||
|
], |
||||
|
}); |
||||
|
|
||||
|
async function handleLock() { |
||||
|
const values = (await validateFields()) as any; |
||||
|
const password: string | undefined = values.password; |
||||
|
closeModal(); |
||||
|
|
||||
|
lockStore.commitLockInfoState({ |
||||
|
isLock: true, |
||||
|
pwd: password, |
||||
|
}); |
||||
|
await resetFields(); |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
t, |
||||
|
prefixCls, |
||||
|
getRealName, |
||||
|
register, |
||||
|
registerForm, |
||||
|
handleLock, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
@import (reference) '../../../../../design/index.less'; |
||||
|
@prefix-cls: ~'@{namespace}-header-lock-modal'; |
||||
|
|
||||
|
.@{prefix-cls} { |
||||
|
&__entry { |
||||
|
position: relative; |
||||
|
height: 240px; |
||||
|
padding: 130px 30px 60px 30px; |
||||
|
background: #fff; |
||||
|
border-radius: 10px; |
||||
|
} |
||||
|
|
||||
|
&__header { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: calc(50% - 45px); |
||||
|
width: auto; |
||||
|
text-align: center; |
||||
|
|
||||
|
&-img { |
||||
|
width: 70px; |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
&-name { |
||||
|
margin-top: 5px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__footer { |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,38 @@ |
|||||
|
<template> |
||||
|
<span @click="handleLock"> |
||||
|
<Tooltip :title="t('layout.header.tooltipLock')" placement="bottom" :mouseEnterDelay="0.5"> |
||||
|
<LockOutlined /> |
||||
|
</Tooltip> |
||||
|
<LockAction @register="register" /> |
||||
|
</span> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { defineComponent } from 'vue'; |
||||
|
import { Tooltip } from 'ant-design-vue'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
import { LockOutlined } from '@ant-design/icons-vue'; |
||||
|
import { useModal } from '/@/components/Modal'; |
||||
|
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; |
||||
|
export default defineComponent({ |
||||
|
name: 'FullScreen', |
||||
|
components: { |
||||
|
LockOutlined, |
||||
|
Tooltip, |
||||
|
LockAction: createAsyncComponent(() => import('./LockModal.vue')), |
||||
|
}, |
||||
|
|
||||
|
setup() { |
||||
|
const { t } = useI18n(); |
||||
|
const [register, { openModal }] = useModal(); |
||||
|
|
||||
|
function handleLock() { |
||||
|
openModal(true); |
||||
|
} |
||||
|
return { |
||||
|
t, |
||||
|
register, |
||||
|
handleLock, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,27 @@ |
|||||
|
<template> |
||||
|
<MenuItem :key="key"> |
||||
|
<span class="flex items-center"> |
||||
|
<Icon :icon="icon" class="mr-1" /> |
||||
|
<span>{{ text }}</span> |
||||
|
</span> |
||||
|
</MenuItem> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
// components |
||||
|
import { Menu } from 'ant-design-vue'; |
||||
|
|
||||
|
import { defineComponent } from 'vue'; |
||||
|
|
||||
|
import Icon from '/@/components/Icon/index'; |
||||
|
import { propTypes } from '/@/utils/propTypes'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'DropdownMenuItem', |
||||
|
components: { MenuItem: Menu.Item, Icon }, |
||||
|
props: { |
||||
|
key: propTypes.string, |
||||
|
text: propTypes.string, |
||||
|
icon: propTypes.string, |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,156 @@ |
|||||
|
<template> |
||||
|
<Dropdown placement="bottomLeft" :overlayClassName="`${prefixCls}-dropdown-overlay`"> |
||||
|
<span :class="[prefixCls, `${prefixCls}--${theme}`]"> |
||||
|
<img :class="`${prefixCls}__header`" src="/@/assets/images/header.jpg" /> |
||||
|
<span :class="`${prefixCls}__info`"> |
||||
|
<span :class="`${prefixCls}__name anticon`">{{ getUserInfo.realName }}</span> |
||||
|
</span> |
||||
|
</span> |
||||
|
|
||||
|
<template #overlay> |
||||
|
<Menu @click="handleMenuClick"> |
||||
|
<MenuItem key="doc" :text="t('layout.header.dropdownItemDoc')" icon="gg:loadbar-doc" /> |
||||
|
<MenuDivider v-if="getShowDoc" /> |
||||
|
<MenuItem |
||||
|
key="loginOut" |
||||
|
:text="t('layout.header.dropdownItemLoginOut')" |
||||
|
icon="carbon:power" |
||||
|
/> |
||||
|
</Menu> |
||||
|
</template> |
||||
|
</Dropdown> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
// components |
||||
|
import { Dropdown, Menu } from 'ant-design-vue'; |
||||
|
|
||||
|
import { defineComponent, computed } from 'vue'; |
||||
|
|
||||
|
// res |
||||
|
|
||||
|
import Icon from '/@/components/Icon/index'; |
||||
|
|
||||
|
import { userStore } from '/@/store/modules/user'; |
||||
|
|
||||
|
import { DOC_URL } from '/@/settings/siteSetting'; |
||||
|
|
||||
|
import { openWindow } from '/@/utils'; |
||||
|
|
||||
|
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
|
||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; |
||||
|
import { propTypes } from '/@/utils/propTypes'; |
||||
|
|
||||
|
type MenuEvent = 'loginOut' | 'doc'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'UserDropdown', |
||||
|
components: { |
||||
|
Dropdown, |
||||
|
Menu, |
||||
|
MenuItem: createAsyncComponent(() => import('./DropMenuItem.vue')), |
||||
|
MenuDivider: Menu.Divider, |
||||
|
Icon, |
||||
|
}, |
||||
|
props: { |
||||
|
theme: propTypes.oneOf(['dark', 'light']), |
||||
|
}, |
||||
|
setup() { |
||||
|
const { prefixCls } = useDesign('header-user-dropdown'); |
||||
|
const { t } = useI18n(); |
||||
|
const { getShowDoc } = useHeaderSetting(); |
||||
|
|
||||
|
const getUserInfo = computed(() => { |
||||
|
const { realName = '', desc } = userStore.getUserInfoState || {}; |
||||
|
return { realName, desc }; |
||||
|
}); |
||||
|
|
||||
|
// login out |
||||
|
function handleLoginOut() { |
||||
|
userStore.confirmLoginOut(); |
||||
|
} |
||||
|
|
||||
|
// open doc |
||||
|
function openDoc() { |
||||
|
openWindow(DOC_URL); |
||||
|
} |
||||
|
|
||||
|
function handleMenuClick(e: { key: MenuEvent }) { |
||||
|
switch (e.key) { |
||||
|
case 'loginOut': |
||||
|
handleLoginOut(); |
||||
|
break; |
||||
|
case 'doc': |
||||
|
openDoc(); |
||||
|
break; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return { |
||||
|
prefixCls, |
||||
|
t, |
||||
|
getUserInfo, |
||||
|
handleMenuClick, |
||||
|
getShowDoc, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
@import (reference) '../../../../../design/index.less'; |
||||
|
@prefix-cls: ~'@{namespace}-header-user-dropdown'; |
||||
|
|
||||
|
.@{prefix-cls} { |
||||
|
display: flex; |
||||
|
height: @header-height; |
||||
|
min-width: 100px; |
||||
|
padding: 0 0 0 10px; |
||||
|
padding-right: 10px; |
||||
|
overflow: hidden; |
||||
|
font-size: 12px; |
||||
|
cursor: pointer; |
||||
|
align-items: center; |
||||
|
|
||||
|
&:hover { |
||||
|
background: @header-light-bg-hover-color; |
||||
|
} |
||||
|
|
||||
|
img { |
||||
|
width: 26px; |
||||
|
height: 26px; |
||||
|
margin-right: 12px; |
||||
|
} |
||||
|
|
||||
|
&__header { |
||||
|
border-radius: 50%; |
||||
|
} |
||||
|
|
||||
|
&__name { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
&--dark { |
||||
|
&:hover { |
||||
|
background: @header-dark-bg-hover-color; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&--light { |
||||
|
.@{prefix-cls}__name { |
||||
|
color: @text-color-base; |
||||
|
} |
||||
|
|
||||
|
.@{prefix-cls}__desc { |
||||
|
color: @header-light-desc-color; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-dropdown-overlay { |
||||
|
.ant-dropdown-menu-item { |
||||
|
min-width: 160px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,161 @@ |
|||||
|
<template> |
||||
|
<Header :class="getHeaderClass"> |
||||
|
<!-- left start --> |
||||
|
<div :class="`${prefixCls}-left`"> |
||||
|
<!-- logo --> |
||||
|
<AppLogo v-if="getShowHeaderLogo" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" /> |
||||
|
|
||||
|
<LayoutTrigger |
||||
|
v-if="getShowContent && getShowHeaderTrigger" |
||||
|
:theme="getHeaderTheme" |
||||
|
:sider="false" |
||||
|
/> |
||||
|
<LayoutBreadcrumb |
||||
|
v-if="getShowContent && getShowBread && !getIsMobile" |
||||
|
:theme="getHeaderTheme" |
||||
|
/> |
||||
|
</div> |
||||
|
<!-- left end --> |
||||
|
|
||||
|
<!-- menu start --> |
||||
|
<div :class="`${prefixCls}-menu`" v-if="getShowTopMenu && !getIsMobile"> |
||||
|
<LayoutMenu |
||||
|
:isHorizontal="true" |
||||
|
:theme="getHeaderTheme" |
||||
|
:splitType="getSplitType" |
||||
|
:menuMode="getMenuMode" |
||||
|
/> |
||||
|
</div> |
||||
|
<!-- menu-end --> |
||||
|
|
||||
|
<!-- action --> |
||||
|
<div :class="`${prefixCls}-action`"> |
||||
|
<AppSearch v-if="!getIsMobile" :class="`${prefixCls}-action__item`" /> |
||||
|
|
||||
|
<ErrorAction v-if="getUseErrorHandle && !getIsMobile" :class="`${prefixCls}-action__item`" /> |
||||
|
|
||||
|
<LockItem v-if="getUseLockPage && !getIsMobile" :class="`${prefixCls}-action__item`" /> |
||||
|
|
||||
|
<Notify v-if="getShowNotice && !getIsMobile" :class="`${prefixCls}-action__item`" /> |
||||
|
|
||||
|
<FullScreen v-if="getShowFullScreen && !getIsMobile" :class="`${prefixCls}-action__item`" /> |
||||
|
|
||||
|
<UserDropDown :theme="getHeaderTheme" /> |
||||
|
|
||||
|
<AppLocalePicker |
||||
|
v-if="getShowLocale" |
||||
|
:reload="true" |
||||
|
:showText="false" |
||||
|
:class="`${prefixCls}-action__item`" |
||||
|
/> |
||||
|
</div> |
||||
|
</Header> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, unref, computed } from 'vue'; |
||||
|
|
||||
|
import { propTypes } from '/@/utils/propTypes'; |
||||
|
|
||||
|
import { Layout } from 'ant-design-vue'; |
||||
|
import { AppLogo } from '/@/components/Application'; |
||||
|
import LayoutMenu from '../menu'; |
||||
|
import LayoutTrigger from '../trigger/index.vue'; |
||||
|
|
||||
|
import { AppSearch } from '/@/components/Application'; |
||||
|
|
||||
|
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting'; |
||||
|
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting'; |
||||
|
import { useRootSetting } from '/@/hooks/setting/useRootSetting'; |
||||
|
import { useLocaleSetting } from '/@/hooks/setting/useLocaleSetting'; |
||||
|
|
||||
|
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum'; |
||||
|
import { AppLocalePicker } from '/@/components/Application'; |
||||
|
|
||||
|
import { |
||||
|
UserDropDown, |
||||
|
LayoutBreadcrumb, |
||||
|
FullScreen, |
||||
|
Notify, |
||||
|
LockItem, |
||||
|
ErrorAction, |
||||
|
} from './components'; |
||||
|
import { useAppInject } from '/@/hooks/web/useAppInject'; |
||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'LayoutHeader', |
||||
|
components: { |
||||
|
Header: Layout.Header, |
||||
|
AppLogo, |
||||
|
LayoutTrigger, |
||||
|
LayoutBreadcrumb, |
||||
|
LayoutMenu, |
||||
|
UserDropDown, |
||||
|
AppLocalePicker, |
||||
|
FullScreen, |
||||
|
Notify, |
||||
|
LockItem, |
||||
|
AppSearch, |
||||
|
ErrorAction, |
||||
|
}, |
||||
|
props: { |
||||
|
fixed: propTypes.bool, |
||||
|
}, |
||||
|
setup(props) { |
||||
|
const { prefixCls } = useDesign('layout-header'); |
||||
|
const { getShowTopMenu, getShowHeaderTrigger, getSplit } = useMenuSetting(); |
||||
|
const { getShowLocale } = useLocaleSetting(); |
||||
|
const { getUseErrorHandle } = useRootSetting(); |
||||
|
|
||||
|
const { |
||||
|
getHeaderTheme, |
||||
|
getUseLockPage, |
||||
|
getShowFullScreen, |
||||
|
getShowNotice, |
||||
|
getShowContent, |
||||
|
getShowBread, |
||||
|
getShowHeaderLogo, |
||||
|
} = useHeaderSetting(); |
||||
|
|
||||
|
const { getIsMobile } = useAppInject(); |
||||
|
|
||||
|
const getHeaderClass = computed(() => { |
||||
|
const theme = unref(getHeaderTheme); |
||||
|
return [ |
||||
|
prefixCls, |
||||
|
{ [`${prefixCls}--fixed`]: props.fixed, [`${prefixCls}--${theme}`]: theme }, |
||||
|
]; |
||||
|
}); |
||||
|
|
||||
|
const getSplitType = computed(() => { |
||||
|
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE; |
||||
|
}); |
||||
|
|
||||
|
const getMenuMode = computed(() => { |
||||
|
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null; |
||||
|
}); |
||||
|
|
||||
|
return { |
||||
|
prefixCls, |
||||
|
getHeaderClass, |
||||
|
getShowHeaderLogo, |
||||
|
getHeaderTheme, |
||||
|
getShowHeaderTrigger, |
||||
|
getIsMobile, |
||||
|
getShowBread, |
||||
|
getShowContent, |
||||
|
getSplitType, |
||||
|
getMenuMode, |
||||
|
getShowTopMenu, |
||||
|
getShowLocale, |
||||
|
getShowFullScreen, |
||||
|
getShowNotice, |
||||
|
getUseLockPage, |
||||
|
getUseErrorHandle, |
||||
|
}; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
|
<style lang="less"> |
||||
|
@import './index.less'; |
||||
|
</style> |
||||
@ -0,0 +1,37 @@ |
|||||
|
<template> |
||||
|
<Tooltip :title="t('layout.multipleTab.tooltipRedo')" placement="bottom" :mouseEnterDelay="0.5"> |
||||
|
<span :class="`${prefixCls}__extra-redo`" @click="handleRedo"> |
||||
|
<RedoOutlined :spin="loading" /> |
||||
|
</span> |
||||
|
</Tooltip> |
||||
|
</template> |
||||
|
<script lang="ts"> |
||||
|
import { defineComponent, ref } from 'vue'; |
||||
|
import { RedoOutlined } from '@ant-design/icons-vue'; |
||||
|
import { useDesign } from '/@/hooks/web/useDesign'; |
||||
|
import { Tooltip } from 'ant-design-vue'; |
||||
|
import { useI18n } from '/@/hooks/web/useI18n'; |
||||
|
import { useTabs } from '/@/hooks/web/useTabs'; |
||||
|
|
||||
|
export default defineComponent({ |
||||
|
name: 'TabContent', |
||||
|
components: { RedoOutlined, Tooltip }, |
||||
|
|
||||
|
setup() { |
||||
|
const loading = ref(false); |
||||
|
const { prefixCls } = useDesign('multiple-tabs-content'); |
||||
|
const { t } = useI18n(); |
||||
|
const { refreshPage } = useTabs(); |
||||
|
|
||||
|
async function handleRedo() { |
||||
|
loading.value = true; |
||||
|
await refreshPage(); |
||||
|
setTimeout(() => { |
||||
|
loading.value = false; |
||||
|
// Animation execution time |
||||
|
}, 1000); |
||||
|
} |
||||
|
return { prefixCls, t, handleRedo, loading }; |
||||
|
}, |
||||
|
}); |
||||
|
</script> |
||||
@ -0,0 +1,28 @@ |
|||||
|
/** |
||||
|
* Used to monitor routing changes to change the status of menus and tabs. There is no need to monitor the route, because the route status change is affected by the page rendering time, which will be slow |
||||
|
*/ |
||||
|
|
||||
|
import Mitt from '/@/utils/mitt'; |
||||
|
import type { RouteLocationNormalized } from 'vue-router'; |
||||
|
import { getRoute } from '/@/router/helper/routeHelper'; |
||||
|
|
||||
|
const mitt = new Mitt(); |
||||
|
|
||||
|
const key = Symbol(); |
||||
|
|
||||
|
let lastChangeTab: RouteLocationNormalized; |
||||
|
|
||||
|
export function setLastChangeTab(lastChangeRoute: RouteLocationNormalized) { |
||||
|
mitt.emit(key, getRoute(lastChangeRoute)); |
||||
|
lastChangeTab = getRoute(lastChangeRoute); |
||||
|
} |
||||
|
|
||||
|
export function listenerLastChangeTab( |
||||
|
callback: (route: RouteLocationNormalized) => void, |
||||
|
immediate = true |
||||
|
) { |
||||
|
mitt.on(key, callback); |
||||
|
if (immediate) { |
||||
|
callback(lastChangeTab); |
||||
|
} |
||||
|
} |
||||
Loading…
Reference in new issue