update
init
This commit is contained in:
@@ -1,5 +1,3 @@
|
|||||||
import BasicMenu from './src/BasicMenu.vue';
|
import BasicMenu from './src/BasicMenu.vue';
|
||||||
import BasicMenu1 from './src/BasicMenu1.vue';
|
|
||||||
import BasicMenu2 from './src/BasicMenu2.vue';
|
|
||||||
|
|
||||||
export { BasicMenu, BasicMenu1, BasicMenu2 };
|
export { BasicMenu};
|
||||||
|
|||||||
@@ -1,17 +1,160 @@
|
|||||||
<template>
|
<template>
|
||||||
<BasicMenu1 v-if="isYT()" />
|
<Menu
|
||||||
<BasicMenu2 v-else />
|
style="height: 100%"
|
||||||
|
:selectedKeys="selectedKeys"
|
||||||
|
:defaultSelectedKeys="defaultSelectedKeys"
|
||||||
|
:mode="mode"
|
||||||
|
:openKeys="getOpenKeys"
|
||||||
|
:inlineIndent="inlineIndent"
|
||||||
|
:theme="theme"
|
||||||
|
@openChange="handleOpenChange"
|
||||||
|
:class="getMenuClass"
|
||||||
|
@click="handleMenuClick"
|
||||||
|
:subMenuOpenDelay="0.2"
|
||||||
|
v-bind="getInlineCollapseOptions"
|
||||||
|
>
|
||||||
|
<template v-for="item in items" :key="item.path">
|
||||||
|
<BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
|
||||||
|
</template>
|
||||||
|
</Menu>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import BasicMenu1 from '/@/components/Menu/src/BasicMenu1.vue';
|
import type { MenuState } from './types';
|
||||||
import BasicMenu2 from '/@/components/Menu/src/BasicMenu2.vue';
|
import { computed, defineComponent, reactive, ref, toRefs, unref, watch } from 'vue';
|
||||||
import { defineComponent } from 'vue';
|
import { Menu } from 'ant-design-vue';
|
||||||
import { getEnvInfo, isYT } from '/@/utils/getEnv';
|
import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
|
||||||
import { Menu } from 'ant-design-vue';
|
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
|
||||||
export default defineComponent({
|
import { useOpenKeys } from './useOpenKeys';
|
||||||
|
import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
|
||||||
|
import { isFunction } from '/@/utils/is';
|
||||||
|
import { basicProps } from './props';
|
||||||
|
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||||
|
import { REDIRECT_NAME } from '/@/router/constant';
|
||||||
|
import { useDesign } from '/@/hooks/web/useDesign';
|
||||||
|
import { getCurrentParentPath } from '/@/router/menus';
|
||||||
|
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
||||||
|
import { getAllParentPath } from '/@/router/helper/menuHelper';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
name: 'BasicMenu',
|
name: 'BasicMenu',
|
||||||
components: { Menu, BasicMenu2, BasicMenu1 },
|
components: {
|
||||||
methods: { getEnvInfo, isYT },
|
Menu,
|
||||||
|
BasicSubMenuItem,
|
||||||
|
},
|
||||||
|
props: basicProps,
|
||||||
|
emits: ['menuClick'],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
const isClickGo = ref(false);
|
||||||
|
const currentActiveMenu = ref('');
|
||||||
|
|
||||||
|
const menuState = reactive<MenuState>({
|
||||||
|
defaultSelectedKeys: [],
|
||||||
|
openKeys: [],
|
||||||
|
selectedKeys: [],
|
||||||
|
collapsedOpenKeys: [],
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const { prefixCls } = useDesign('basic-menu');
|
||||||
|
const { items, mode, accordion } = toRefs(props);
|
||||||
|
|
||||||
|
const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
|
||||||
|
|
||||||
|
const { currentRoute } = useRouter();
|
||||||
|
|
||||||
|
const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
|
||||||
|
|
||||||
|
const getIsTopMenu = computed(() => {
|
||||||
|
const { type, mode } = props;
|
||||||
|
|
||||||
|
return (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) || (props.isHorizontal && unref(getSplit));
|
||||||
|
});
|
||||||
|
|
||||||
|
const getMenuClass = computed(() => {
|
||||||
|
const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
|
||||||
|
return [
|
||||||
|
prefixCls,
|
||||||
|
`justify-${align}`,
|
||||||
|
{
|
||||||
|
[`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
|
||||||
|
[`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
|
||||||
|
},
|
||||||
|
];
|
||||||
|
});
|
||||||
|
|
||||||
|
const getInlineCollapseOptions = computed(() => {
|
||||||
|
const isInline = props.mode === MenuModeEnum.INLINE;
|
||||||
|
|
||||||
|
const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
|
||||||
|
if (isInline) {
|
||||||
|
inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
|
||||||
|
}
|
||||||
|
return inlineCollapseOptions;
|
||||||
|
});
|
||||||
|
|
||||||
|
listenerRouteChange((route) => {
|
||||||
|
if (route.name === REDIRECT_NAME) return;
|
||||||
|
handleMenuChange(route);
|
||||||
|
currentActiveMenu.value = route.meta?.currentActiveMenu as string;
|
||||||
|
|
||||||
|
if (unref(currentActiveMenu)) {
|
||||||
|
menuState.selectedKeys = [unref(currentActiveMenu)];
|
||||||
|
setOpenKeys(unref(currentActiveMenu));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
!props.mixSider &&
|
||||||
|
watch(
|
||||||
|
() => props.items,
|
||||||
|
() => {
|
||||||
|
handleMenuChange();
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
//update-begin-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后,打开菜单,显示名称未展示为菜单名称
|
||||||
|
async function handleMenuClick({ item, key }: { item: any; key: string; keyPath: string[] }) {
|
||||||
|
const { beforeClickFn } = props;
|
||||||
|
if (beforeClickFn && isFunction(beforeClickFn)) {
|
||||||
|
const flag = await beforeClickFn(key);
|
||||||
|
if (!flag) return;
|
||||||
|
}
|
||||||
|
emit('menuClick', key, item);
|
||||||
|
//update-end-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后,打开菜单,显示名称未展示为菜单名称
|
||||||
|
|
||||||
|
isClickGo.value = true;
|
||||||
|
// const parentPath = await getCurrentParentPath(key);
|
||||||
|
|
||||||
|
// menuState.openKeys = [parentPath];
|
||||||
|
menuState.selectedKeys = [key];
|
||||||
|
}
|
||||||
|
|
||||||
|
async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
|
||||||
|
if (unref(isClickGo)) {
|
||||||
|
isClickGo.value = false;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const path = (route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
|
||||||
|
setOpenKeys(path);
|
||||||
|
if (unref(currentActiveMenu)) return;
|
||||||
|
if (props.isHorizontal && unref(getSplit)) {
|
||||||
|
const parentPath = await getCurrentParentPath(path);
|
||||||
|
menuState.selectedKeys = [parentPath];
|
||||||
|
} else {
|
||||||
|
const parentPaths = await getAllParentPath(props.items, path);
|
||||||
|
menuState.selectedKeys = parentPaths;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
handleMenuClick,
|
||||||
|
getInlineCollapseOptions,
|
||||||
|
getMenuClass,
|
||||||
|
handleOpenChange,
|
||||||
|
getOpenKeys,
|
||||||
|
...toRefs(menuState),
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="less"></style>
|
<style lang="less">
|
||||||
|
@import './index.less';
|
||||||
|
</style>
|
||||||
|
|||||||
@@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Menu
|
|
||||||
style="height: 100%"
|
|
||||||
:selectedKeys="selectedKeys"
|
|
||||||
:defaultSelectedKeys="defaultSelectedKeys"
|
|
||||||
:mode="mode"
|
|
||||||
:openKeys="getOpenKeys"
|
|
||||||
:inlineIndent="inlineIndent"
|
|
||||||
:theme="theme"
|
|
||||||
@openChange="handleOpenChange"
|
|
||||||
:class="getMenuClass"
|
|
||||||
@click="handleMenuClick"
|
|
||||||
:subMenuOpenDelay="0.2"
|
|
||||||
v-bind="getInlineCollapseOptions"
|
|
||||||
>
|
|
||||||
<template v-for="item in items" :key="item.path">
|
|
||||||
<BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
|
|
||||||
</template>
|
|
||||||
</Menu>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import type { MenuState } from './types';
|
|
||||||
import { computed, defineComponent, reactive, ref, toRefs, unref, watch } from 'vue';
|
|
||||||
import { Menu } from 'ant-design-vue';
|
|
||||||
import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
|
|
||||||
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
|
|
||||||
import { useOpenKeys } from './useOpenKeys';
|
|
||||||
import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
|
|
||||||
import { isFunction } from '/@/utils/is';
|
|
||||||
import { basicProps } from './props';
|
|
||||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
||||||
import { REDIRECT_NAME } from '/@/router/constant';
|
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
|
||||||
import { getCurrentParentPath } from '/@/router/menus';
|
|
||||||
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
|
||||||
import { getAllParentPath } from '/@/router/helper/menuHelper';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'BasicMenu1',
|
|
||||||
components: {
|
|
||||||
Menu,
|
|
||||||
BasicSubMenuItem,
|
|
||||||
},
|
|
||||||
props: basicProps,
|
|
||||||
emits: ['menuClick'],
|
|
||||||
setup(props, { emit }) {
|
|
||||||
const isClickGo = ref(false);
|
|
||||||
const currentActiveMenu = ref('');
|
|
||||||
|
|
||||||
const menuState = reactive<MenuState>({
|
|
||||||
defaultSelectedKeys: [],
|
|
||||||
openKeys: [],
|
|
||||||
selectedKeys: [],
|
|
||||||
collapsedOpenKeys: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
const { prefixCls } = useDesign('basic-menu');
|
|
||||||
const { items, mode, accordion } = toRefs(props);
|
|
||||||
|
|
||||||
const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
|
|
||||||
|
|
||||||
const { currentRoute } = useRouter();
|
|
||||||
|
|
||||||
const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
|
|
||||||
|
|
||||||
const getIsTopMenu = computed(() => {
|
|
||||||
const { type, mode } = props;
|
|
||||||
|
|
||||||
return (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) || (props.isHorizontal && unref(getSplit));
|
|
||||||
});
|
|
||||||
|
|
||||||
const getMenuClass = computed(() => {
|
|
||||||
const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
|
|
||||||
return [
|
|
||||||
prefixCls,
|
|
||||||
`justify-${align}`,
|
|
||||||
{
|
|
||||||
[`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
|
|
||||||
[`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
const getInlineCollapseOptions = computed(() => {
|
|
||||||
const isInline = props.mode === MenuModeEnum.INLINE;
|
|
||||||
|
|
||||||
const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
|
|
||||||
if (isInline) {
|
|
||||||
inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
|
|
||||||
}
|
|
||||||
return inlineCollapseOptions;
|
|
||||||
});
|
|
||||||
|
|
||||||
listenerRouteChange((route) => {
|
|
||||||
if (route.name === REDIRECT_NAME) return;
|
|
||||||
handleMenuChange(route);
|
|
||||||
currentActiveMenu.value = route.meta?.currentActiveMenu as string;
|
|
||||||
|
|
||||||
if (unref(currentActiveMenu)) {
|
|
||||||
menuState.selectedKeys = [unref(currentActiveMenu)];
|
|
||||||
setOpenKeys(unref(currentActiveMenu));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
!props.mixSider &&
|
|
||||||
watch(
|
|
||||||
() => props.items,
|
|
||||||
() => {
|
|
||||||
handleMenuChange();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
//update-begin-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后,打开菜单,显示名称未展示为菜单名称
|
|
||||||
async function handleMenuClick({ item, key }: { item: any; key: string; keyPath: string[] }) {
|
|
||||||
const { beforeClickFn } = props;
|
|
||||||
if (beforeClickFn && isFunction(beforeClickFn)) {
|
|
||||||
const flag = await beforeClickFn(key);
|
|
||||||
if (!flag) return;
|
|
||||||
}
|
|
||||||
emit('menuClick', key, item);
|
|
||||||
//update-end-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后,打开菜单,显示名称未展示为菜单名称
|
|
||||||
|
|
||||||
isClickGo.value = true;
|
|
||||||
// const parentPath = await getCurrentParentPath(key);
|
|
||||||
|
|
||||||
// menuState.openKeys = [parentPath];
|
|
||||||
menuState.selectedKeys = [key];
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
|
|
||||||
if (unref(isClickGo)) {
|
|
||||||
isClickGo.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const path = (route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
|
|
||||||
setOpenKeys(path);
|
|
||||||
if (unref(currentActiveMenu)) return;
|
|
||||||
if (props.isHorizontal && unref(getSplit)) {
|
|
||||||
const parentPath = await getCurrentParentPath(path);
|
|
||||||
menuState.selectedKeys = [parentPath];
|
|
||||||
} else {
|
|
||||||
const parentPaths = await getAllParentPath(props.items, path);
|
|
||||||
menuState.selectedKeys = parentPaths;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
handleMenuClick,
|
|
||||||
getInlineCollapseOptions,
|
|
||||||
getMenuClass,
|
|
||||||
handleOpenChange,
|
|
||||||
getOpenKeys,
|
|
||||||
...toRefs(menuState),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
@import './index1.less';
|
|
||||||
</style>
|
|
||||||
@@ -1,160 +0,0 @@
|
|||||||
<template>
|
|
||||||
<Menu
|
|
||||||
style="height: 100%"
|
|
||||||
:selectedKeys="selectedKeys"
|
|
||||||
:defaultSelectedKeys="defaultSelectedKeys"
|
|
||||||
:mode="mode"
|
|
||||||
:openKeys="getOpenKeys"
|
|
||||||
:inlineIndent="inlineIndent"
|
|
||||||
:theme="theme"
|
|
||||||
@openChange="handleOpenChange"
|
|
||||||
:class="getMenuClass"
|
|
||||||
@click="handleMenuClick"
|
|
||||||
:subMenuOpenDelay="0.2"
|
|
||||||
v-bind="getInlineCollapseOptions"
|
|
||||||
>
|
|
||||||
<template v-for="item in items" :key="item.path">
|
|
||||||
<BasicSubMenuItem :item="item" :theme="theme" :isHorizontal="isHorizontal" />
|
|
||||||
</template>
|
|
||||||
</Menu>
|
|
||||||
</template>
|
|
||||||
<script lang="ts">
|
|
||||||
import type { MenuState } from './types';
|
|
||||||
import { computed, defineComponent, reactive, ref, toRefs, unref, watch } from 'vue';
|
|
||||||
import { Menu } from 'ant-design-vue';
|
|
||||||
import BasicSubMenuItem from './components/BasicSubMenuItem.vue';
|
|
||||||
import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
|
|
||||||
import { useOpenKeys } from './useOpenKeys';
|
|
||||||
import { RouteLocationNormalizedLoaded, useRouter } from 'vue-router';
|
|
||||||
import { isFunction } from '/@/utils/is';
|
|
||||||
import { basicProps } from './props';
|
|
||||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
||||||
import { REDIRECT_NAME } from '/@/router/constant';
|
|
||||||
import { useDesign } from '/@/hooks/web/useDesign';
|
|
||||||
import { getCurrentParentPath } from '/@/router/menus';
|
|
||||||
import { listenerRouteChange } from '/@/logics/mitt/routeChange';
|
|
||||||
import { getAllParentPath } from '/@/router/helper/menuHelper';
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'BasicMenu2',
|
|
||||||
components: {
|
|
||||||
Menu,
|
|
||||||
BasicSubMenuItem,
|
|
||||||
},
|
|
||||||
props: basicProps,
|
|
||||||
emits: ['menuClick'],
|
|
||||||
setup(props, { emit }) {
|
|
||||||
const isClickGo = ref(false);
|
|
||||||
const currentActiveMenu = ref('');
|
|
||||||
|
|
||||||
const menuState = reactive<MenuState>({
|
|
||||||
defaultSelectedKeys: [],
|
|
||||||
openKeys: [],
|
|
||||||
selectedKeys: [],
|
|
||||||
collapsedOpenKeys: [],
|
|
||||||
});
|
|
||||||
|
|
||||||
const { prefixCls } = useDesign('basic-menu');
|
|
||||||
const { items, mode, accordion } = toRefs(props);
|
|
||||||
|
|
||||||
const { getCollapsed, getTopMenuAlign, getSplit } = useMenuSetting();
|
|
||||||
|
|
||||||
const { currentRoute } = useRouter();
|
|
||||||
|
|
||||||
const { handleOpenChange, setOpenKeys, getOpenKeys } = useOpenKeys(menuState, items, mode as any, accordion);
|
|
||||||
|
|
||||||
const getIsTopMenu = computed(() => {
|
|
||||||
const { type, mode } = props;
|
|
||||||
|
|
||||||
return (type === MenuTypeEnum.TOP_MENU && mode === MenuModeEnum.HORIZONTAL) || (props.isHorizontal && unref(getSplit));
|
|
||||||
});
|
|
||||||
|
|
||||||
const getMenuClass = computed(() => {
|
|
||||||
const align = props.isHorizontal && unref(getSplit) ? 'start' : unref(getTopMenuAlign);
|
|
||||||
return [
|
|
||||||
prefixCls,
|
|
||||||
`justify-${align}`,
|
|
||||||
{
|
|
||||||
[`${prefixCls}__second`]: !props.isHorizontal && unref(getSplit),
|
|
||||||
[`${prefixCls}__sidebar-hor`]: unref(getIsTopMenu),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
});
|
|
||||||
|
|
||||||
const getInlineCollapseOptions = computed(() => {
|
|
||||||
const isInline = props.mode === MenuModeEnum.INLINE;
|
|
||||||
|
|
||||||
const inlineCollapseOptions: { inlineCollapsed?: boolean } = {};
|
|
||||||
if (isInline) {
|
|
||||||
inlineCollapseOptions.inlineCollapsed = props.mixSider ? false : unref(getCollapsed);
|
|
||||||
}
|
|
||||||
return inlineCollapseOptions;
|
|
||||||
});
|
|
||||||
|
|
||||||
listenerRouteChange((route) => {
|
|
||||||
if (route.name === REDIRECT_NAME) return;
|
|
||||||
handleMenuChange(route);
|
|
||||||
currentActiveMenu.value = route.meta?.currentActiveMenu as string;
|
|
||||||
|
|
||||||
if (unref(currentActiveMenu)) {
|
|
||||||
menuState.selectedKeys = [unref(currentActiveMenu)];
|
|
||||||
setOpenKeys(unref(currentActiveMenu));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
!props.mixSider &&
|
|
||||||
watch(
|
|
||||||
() => props.items,
|
|
||||||
() => {
|
|
||||||
handleMenuChange();
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
//update-begin-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后,打开菜单,显示名称未展示为菜单名称
|
|
||||||
async function handleMenuClick({ item, key }: { item: any; key: string; keyPath: string[] }) {
|
|
||||||
const { beforeClickFn } = props;
|
|
||||||
if (beforeClickFn && isFunction(beforeClickFn)) {
|
|
||||||
const flag = await beforeClickFn(key);
|
|
||||||
if (!flag) return;
|
|
||||||
}
|
|
||||||
emit('menuClick', key, item);
|
|
||||||
//update-end-author:taoyan date:2022-6-1 for: VUEN-1144 online 配置成菜单后,打开菜单,显示名称未展示为菜单名称
|
|
||||||
|
|
||||||
isClickGo.value = true;
|
|
||||||
// const parentPath = await getCurrentParentPath(key);
|
|
||||||
|
|
||||||
// menuState.openKeys = [parentPath];
|
|
||||||
menuState.selectedKeys = [key];
|
|
||||||
}
|
|
||||||
|
|
||||||
async function handleMenuChange(route?: RouteLocationNormalizedLoaded) {
|
|
||||||
if (unref(isClickGo)) {
|
|
||||||
isClickGo.value = false;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
const path = (route || unref(currentRoute)).meta?.currentActiveMenu || (route || unref(currentRoute)).path;
|
|
||||||
setOpenKeys(path);
|
|
||||||
if (unref(currentActiveMenu)) return;
|
|
||||||
if (props.isHorizontal && unref(getSplit)) {
|
|
||||||
const parentPath = await getCurrentParentPath(path);
|
|
||||||
menuState.selectedKeys = [parentPath];
|
|
||||||
} else {
|
|
||||||
const parentPaths = await getAllParentPath(props.items, path);
|
|
||||||
menuState.selectedKeys = parentPaths;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
handleMenuClick,
|
|
||||||
getInlineCollapseOptions,
|
|
||||||
getMenuClass,
|
|
||||||
handleOpenChange,
|
|
||||||
getOpenKeys,
|
|
||||||
...toRefs(menuState),
|
|
||||||
};
|
|
||||||
},
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
<style lang="less">
|
|
||||||
@import './index2.less';
|
|
||||||
</style>
|
|
||||||
@@ -8,7 +8,6 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
||||||
.ant-menu-item {
|
.ant-menu-item {
|
||||||
color: #000000;
|
|
||||||
transition: unset;
|
transition: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -30,11 +29,7 @@
|
|||||||
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
||||||
.ant-menu-submenu-active,
|
.ant-menu-submenu-active,
|
||||||
.ant-menu-submenu-title:hover {
|
.ant-menu-submenu-title:hover {
|
||||||
font-size: 17px;
|
background-color: @top-menu-active-bg-color !important;
|
||||||
font-weight: bold;
|
|
||||||
color: #5473e8;
|
|
||||||
//background-color: @top-menu-active-bg-color !important;
|
|
||||||
background-color: #dfe7f5 !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-menu-item:hover,
|
.ant-menu-item:hover,
|
||||||
@@ -76,13 +71,13 @@
|
|||||||
transition: unset;
|
transition: unset;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.ant-menu-item-selected {
|
//.ant-menu-item-selected {
|
||||||
&::after {
|
// &::after {
|
||||||
position: absolute !important;
|
// position: absolute !important;
|
||||||
left: 20px !important;
|
// left: 20px !important;
|
||||||
bottom: 29% !important;
|
// bottom: 29% !important;
|
||||||
width: calc(100% - 40px);
|
// width: calc(100% - 40px);
|
||||||
height: 3px;
|
// height: 3px;
|
||||||
background: #5473e8;
|
// background: #5473e8;
|
||||||
}
|
// }
|
||||||
}
|
//}
|
||||||
|
|||||||
@@ -1,91 +0,0 @@
|
|||||||
@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
|
|
||||||
|
|
||||||
.yt {
|
|
||||||
.app-top-menu-popup {
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{basic-menu-prefix-cls} {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.ant-menu-item {
|
|
||||||
color: #000000;
|
|
||||||
transition: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__sidebar-hor {
|
|
||||||
&.ant-menu-horizontal {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&.ant-menu-dark {
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
.ant-menu-submenu:hover,
|
|
||||||
.ant-menu-item-open,
|
|
||||||
.ant-menu-submenu-open,
|
|
||||||
.ant-menu-item-selected,
|
|
||||||
.ant-menu-submenu-selected,
|
|
||||||
.ant-menu-item:hover,
|
|
||||||
.ant-menu-item-active,
|
|
||||||
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
|
||||||
.ant-menu-submenu-active,
|
|
||||||
.ant-menu-submenu-title:hover {
|
|
||||||
font-size: 17px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #5473e8;
|
|
||||||
//background-color: @top-menu-active-bg-color !important;
|
|
||||||
background-color: #dfe7f5 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-item:hover,
|
|
||||||
.ant-menu-item-active,
|
|
||||||
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
|
||||||
.ant-menu-submenu-active,
|
|
||||||
.ant-menu-submenu-title:hover {
|
|
||||||
background-color: @top-menu-active-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{basic-menu-prefix-cls}-item__level1 {
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
&.ant-menu-item-selected,
|
|
||||||
&.ant-menu-submenu-selected {
|
|
||||||
background-color: @top-menu-active-bg-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-item,
|
|
||||||
.ant-menu-submenu {
|
|
||||||
&.@{basic-menu-prefix-cls}-item__level1,
|
|
||||||
.ant-menu-submenu-title {
|
|
||||||
height: @header-height;
|
|
||||||
line-height: @header-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-submenu,
|
|
||||||
.ant-menu-submenu-inline {
|
|
||||||
transition: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-inline.ant-menu-sub {
|
|
||||||
box-shadow: unset !important;
|
|
||||||
transition: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-menu-item-selected {
|
|
||||||
&::after {
|
|
||||||
position: absolute !important;
|
|
||||||
left: 20px !important;
|
|
||||||
bottom: 29% !important;
|
|
||||||
width: calc(100% - 40px);
|
|
||||||
height: 3px;
|
|
||||||
background: #5473e8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
||||||
@@ -1,86 +0,0 @@
|
|||||||
@basic-menu-prefix-cls: ~'@{namespace}-basic-menu';
|
|
||||||
|
|
||||||
.qh {
|
|
||||||
.app-top-menu-popup {
|
|
||||||
min-width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{basic-menu-prefix-cls} {
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
.ant-menu-item {
|
|
||||||
transition: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
&__sidebar-hor {
|
|
||||||
&.ant-menu-horizontal {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&.ant-menu-dark {
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
.ant-menu-submenu:hover,
|
|
||||||
.ant-menu-item-open,
|
|
||||||
.ant-menu-submenu-open,
|
|
||||||
.ant-menu-item-selected,
|
|
||||||
.ant-menu-submenu-selected,
|
|
||||||
.ant-menu-item:hover,
|
|
||||||
.ant-menu-item-active,
|
|
||||||
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
|
||||||
.ant-menu-submenu-active,
|
|
||||||
.ant-menu-submenu-title:hover {
|
|
||||||
//color: #5473e8;
|
|
||||||
background-color: @top-menu-active-bg-color !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-item:hover,
|
|
||||||
.ant-menu-item-active,
|
|
||||||
.ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open,
|
|
||||||
.ant-menu-submenu-active,
|
|
||||||
.ant-menu-submenu-title:hover {
|
|
||||||
background-color: @top-menu-active-bg-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.@{basic-menu-prefix-cls}-item__level1 {
|
|
||||||
background-color: transparent;
|
|
||||||
|
|
||||||
&.ant-menu-item-selected,
|
|
||||||
&.ant-menu-submenu-selected {
|
|
||||||
background-color: @top-menu-active-bg-color !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-item,
|
|
||||||
.ant-menu-submenu {
|
|
||||||
&.@{basic-menu-prefix-cls}-item__level1,
|
|
||||||
.ant-menu-submenu-title {
|
|
||||||
height: @header-height;
|
|
||||||
line-height: @header-height;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-submenu,
|
|
||||||
.ant-menu-submenu-inline {
|
|
||||||
transition: unset;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-inline.ant-menu-sub {
|
|
||||||
box-shadow: unset !important;
|
|
||||||
transition: unset;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.ant-menu-item-selected {
|
|
||||||
&::after {
|
|
||||||
position: absolute !important;
|
|
||||||
left: 0 !important;
|
|
||||||
bottom: 0 !important;
|
|
||||||
width: 100%;
|
|
||||||
height: 5px;
|
|
||||||
background: #5473e8;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -22,7 +22,7 @@
|
|||||||
import { useUserStore } from '/@/store/modules/user';
|
import { useUserStore } from '/@/store/modules/user';
|
||||||
import { getEnvInfo } from '/@/utils/getEnv';
|
import { getEnvInfo } from '/@/utils/getEnv';
|
||||||
|
|
||||||
const HEADER_HEIGHT = getEnvInfo().VITE_PLATFORM === 'YT' ? 60 : 80;
|
const HEADER_HEIGHT = 80;
|
||||||
|
|
||||||
// updateBy:sunjianlei---updateDate:2021-09-03---修改tab切换栏样式:更改高度
|
// updateBy:sunjianlei---updateDate:2021-09-03---修改tab切换栏样式:更改高度
|
||||||
const TABS_HEIGHT = 32;
|
const TABS_HEIGHT = 32;
|
||||||
@@ -45,7 +45,8 @@
|
|||||||
const { getShowMultipleTab, getTabsTheme } = useMultipleTabSetting();
|
const { getShowMultipleTab, getTabsTheme } = useMultipleTabSetting();
|
||||||
|
|
||||||
const HEADER_HEIGHT_SPECIAL_PATH = ref<number>(
|
const HEADER_HEIGHT_SPECIAL_PATH = ref<number>(
|
||||||
getEnvInfo().VITE_PLATFORM === 'YT' && !['2', '4', '5', '6'].includes(useUserStore().getUserInfo.personType) ? 50 : 0
|
// getEnvInfo().VITE_PLATFORM === 'YT' && !['2', '4', '5', '6'].includes(useUserStore().getUserInfo.personType) ? 50 : 0
|
||||||
|
0
|
||||||
);
|
);
|
||||||
|
|
||||||
const getShowTabs = computed(() => {
|
const getShowTabs = computed(() => {
|
||||||
|
|||||||
@@ -2,10 +2,6 @@
|
|||||||
<Header
|
<Header
|
||||||
:class="getHeaderClass"
|
:class="getHeaderClass"
|
||||||
style="overflow: hidden"
|
style="overflow: hidden"
|
||||||
:style="{
|
|
||||||
backgroundColor: getEnvInfo().VITE_PLATFORM === 'YT' ? '#9eb7e3 !important' : '',
|
|
||||||
height: getEnvInfo().VITE_PLATFORM === 'YT' ? '60px !important' : '80px !important',
|
|
||||||
}"
|
|
||||||
>
|
>
|
||||||
<!-- left start -->
|
<!-- left start -->
|
||||||
<div :class="`${prefixCls}-left`">
|
<div :class="`${prefixCls}-left`">
|
||||||
|
|||||||
@@ -3,8 +3,6 @@
|
|||||||
<LayoutFeatures />
|
<LayoutFeatures />
|
||||||
<LayoutHeader fixed v-if="getShowFullHeaderRef" />
|
<LayoutHeader fixed v-if="getShowFullHeaderRef" />
|
||||||
<div
|
<div
|
||||||
v-if="showNL && getEnvInfo().VITE_PLATFORM === 'YT' && !['2', '4', '5', '6'].includes(useUserStore().getUserInfo.personType)"
|
|
||||||
:style="{ top: getEnvInfo().VITE_PLATFORM === 'YT' ? '60px' : '80px' }"
|
|
||||||
class="menu-list-outer"
|
class="menu-list-outer"
|
||||||
>
|
>
|
||||||
<div class="menu-list-outer-inner">
|
<div class="menu-list-outer-inner">
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
<script lang="tsx">
|
<script lang="tsx">
|
||||||
import type { CSSProperties, PropType } from 'vue';
|
import type { CSSProperties, PropType } from 'vue';
|
||||||
import { computed, defineComponent, toRef, unref } from 'vue';
|
import { computed, defineComponent, toRef, unref } from 'vue';
|
||||||
import { BasicMenu1, BasicMenu2 } from '/@/components/Menu';
|
import { BasicMenu } from '/@/components/Menu';
|
||||||
import { SimpleMenu } from '/@/components/SimpleMenu';
|
import { SimpleMenu } from '/@/components/SimpleMenu';
|
||||||
import { AppLogo } from '/@/components/Application';
|
import { AppLogo } from '/@/components/Application';
|
||||||
|
|
||||||
@@ -187,25 +187,14 @@
|
|||||||
// if (!menus || !menus.length) return null;
|
// if (!menus || !menus.length) return null;
|
||||||
return !props.isHorizontal ? (
|
return !props.isHorizontal ? (
|
||||||
<SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus || []} />
|
<SimpleMenu {...menuProps} isSplitMenu={unref(getSplit)} items={menus || []} />
|
||||||
) : isYT() ? (
|
) : (<BasicMenu
|
||||||
<BasicMenu1
|
|
||||||
{...(menuProps as any)}
|
{...(menuProps as any)}
|
||||||
isHorizontal={props.isHorizontal}
|
isHorizontal={props.isHorizontal}
|
||||||
type={unref(getMenuType)}
|
type={unref(getMenuType)}
|
||||||
showLogo={unref(getIsShowLogo)}
|
showLogo={unref(getIsShowLogo)}
|
||||||
mode={unref(getComputedMenuMode as any)}
|
mode={unref(getComputedMenuMode as any)}
|
||||||
items={menus || []}
|
items={menus || []}
|
||||||
/>
|
/>);
|
||||||
) : (
|
|
||||||
<BasicMenu2
|
|
||||||
{...(menuProps as any)}
|
|
||||||
isHorizontal={props.isHorizontal}
|
|
||||||
type={unref(getMenuType)}
|
|
||||||
showLogo={unref(getIsShowLogo)}
|
|
||||||
mode={unref(getComputedMenuMode as any)}
|
|
||||||
items={menus || []}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return () => {
|
return () => {
|
||||||
|
|||||||
Reference in New Issue
Block a user