mirror of
https://github.com/jeecgboot/JeecgBoot.git
synced 2026-01-03 20:35:29 +08:00
v3.7.2 版本代码合并
This commit is contained in:
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div :style="getPlaceholderDomStyle" v-if="getIsShowPlaceholderDom"></div>
|
||||
<div :style="getWrapStyle" :class="getClass">
|
||||
<LayoutHeader v-if="getShowInsetHeaderRef" />
|
||||
<LayoutHeader v-if="getShowHeader" />
|
||||
<MultipleTabs v-if="getShowTabs" />
|
||||
</div>
|
||||
</template>
|
||||
@ -11,6 +11,8 @@
|
||||
import LayoutHeader from './index.vue';
|
||||
import MultipleTabs from '../tabs/index.vue';
|
||||
|
||||
import { useAppStore } from "@/store/modules/app";
|
||||
import { useGlobSetting } from "/@/hooks/setting";
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useFullContent } from '/@/hooks/web/useFullContent';
|
||||
@ -19,6 +21,7 @@
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useLayoutHeight } from '../content/useContentViewHeight';
|
||||
import { TabsThemeEnum } from '/@/enums/appEnum';
|
||||
|
||||
// update-begin--author:liaozhiyang---date:20240407---for:【QQYUN-8774】网站header区域加高
|
||||
const HEADER_HEIGHT = 60;
|
||||
// update-begin--author:liaozhiyang---date:20240407---for:【【QQYUN-8774】网站header区域加高
|
||||
@ -35,15 +38,30 @@
|
||||
const { setHeaderHeight } = useLayoutHeight();
|
||||
const { prefixCls } = useDesign('layout-multiple-header');
|
||||
|
||||
const appStore = useAppStore()
|
||||
const glob = useGlobSetting()
|
||||
|
||||
const { getCalcContentWidth, getSplit } = useMenuSetting();
|
||||
const { getIsMobile } = useAppInject();
|
||||
const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme, getShowHeader } = useHeaderSetting();
|
||||
const { getFixed, getShowInsetHeaderRef, getShowFullHeaderRef, getHeaderTheme } = useHeaderSetting();
|
||||
|
||||
const { getFullContent } = useFullContent();
|
||||
|
||||
const { getShowMultipleTab, getTabsTheme } = useMultipleTabSetting();
|
||||
|
||||
const getShowHeader = computed(() => {
|
||||
// 控制是否显示顶部
|
||||
if (appStore.mainAppProps.hideHeader) {
|
||||
return false;
|
||||
}
|
||||
return unref(getShowInsetHeaderRef);
|
||||
})
|
||||
|
||||
const getShowTabs = computed(() => {
|
||||
// 控制是否显示多Tabs切换
|
||||
if (appStore.mainAppProps.hideMultiTabs) {
|
||||
return false;
|
||||
}
|
||||
return unref(getShowMultipleTab) && !unref(getFullContent);
|
||||
});
|
||||
|
||||
@ -53,7 +71,7 @@
|
||||
|
||||
const getWrapStyle = computed((): CSSProperties => {
|
||||
const style: CSSProperties = {};
|
||||
if (unref(getFixed)) {
|
||||
if (unref(getFixed) && !glob.isQiankunMicro) {
|
||||
style.width = unref(getIsMobile) ? '100%' : unref(getCalcContentWidth);
|
||||
}
|
||||
if (unref(getShowFullHeaderRef)) {
|
||||
@ -83,7 +101,7 @@
|
||||
if ((unref(getShowFullHeaderRef) || !unref(getSplit)) && unref(getShowHeader) && !unref(getFullContent)) {
|
||||
height += HEADER_HEIGHT;
|
||||
}
|
||||
if (unref(getShowMultipleTab) && !unref(getFullContent)) {
|
||||
if (unref(getShowTabs) && !unref(getFullContent)) {
|
||||
height += unref(getTabsThemeHeight);
|
||||
}
|
||||
setHeaderHeight(height);
|
||||
@ -93,10 +111,15 @@
|
||||
});
|
||||
|
||||
const getClass = computed(() => {
|
||||
return [prefixCls, `${prefixCls}--${unref(getHeaderTheme)}`, { [`${prefixCls}--fixed`]: unref(getIsFixed) }];
|
||||
return [prefixCls, `${prefixCls}--${unref(getHeaderTheme)}`, {
|
||||
[`${prefixCls}--fixed`]: unref(getIsFixed),
|
||||
// 【JEECG作为乾坤子应用】
|
||||
[`${prefixCls}--qiankun-micro`]: glob.isQiankunMicro,
|
||||
}];
|
||||
});
|
||||
|
||||
return {
|
||||
glob,
|
||||
getClass,
|
||||
prefixCls,
|
||||
getPlaceholderDomStyle,
|
||||
@ -104,7 +127,7 @@
|
||||
getWrapStyle,
|
||||
getIsShowPlaceholderDom,
|
||||
getShowTabs,
|
||||
getShowInsetHeaderRef,
|
||||
getShowHeader,
|
||||
};
|
||||
},
|
||||
});
|
||||
@ -126,5 +149,11 @@
|
||||
z-index: @multiple-tab-fixed-z-index;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// 【JEECG作为乾坤子应用】
|
||||
&--qiankun-micro {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
import { ScrollContainer } from '/@/components/Container';
|
||||
|
||||
import { useGo } from '/@/hooks/web/usePage';
|
||||
import { useGlobSetting } from "/@/hooks/setting";
|
||||
import { useSplitMenu } from './useLayoutMenu';
|
||||
import { openWindow } from '/@/utils';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
@ -56,6 +57,8 @@
|
||||
|
||||
const { prefixCls } = useDesign('layout-menu');
|
||||
|
||||
const glob = useGlobSetting()
|
||||
|
||||
const { menusRef } = useSplitMenu(toRef(props, 'splitType'));
|
||||
|
||||
const { getIsMobile } = useAppInject();
|
||||
@ -67,6 +70,11 @@
|
||||
const getIsShowLogo = computed(() => unref(getShowLogo) && unref(getIsSidebarType));
|
||||
|
||||
const getUseScroll = computed(() => {
|
||||
// 【JEECG作为乾坤子应用】在乾坤子应用下,菜单不固定
|
||||
if (glob.isQiankunMicro) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return (
|
||||
!unref(getIsHorizontal) &&
|
||||
(unref(getIsSidebarType) || props.splitType === MenuSplitTyeEnum.LEFT || props.splitType === MenuSplitTyeEnum.NONE)
|
||||
|
||||
@ -30,12 +30,15 @@
|
||||
|
||||
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
||||
|
||||
import { useAppStore } from "@/store/modules/app";
|
||||
import { useGlobSetting } from "/@/hooks/setting";
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import DragBar from './DragBar.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutSideBar',
|
||||
components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
|
||||
@ -48,6 +51,9 @@
|
||||
|
||||
const { prefixCls } = useDesign('layout-sideBar');
|
||||
|
||||
const glob = useGlobSetting()
|
||||
const appStore = useAppStore()
|
||||
|
||||
const { getIsMobile } = useAppInject();
|
||||
|
||||
const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
|
||||
@ -65,6 +71,10 @@
|
||||
});
|
||||
|
||||
const showClassSideBarRef = computed(() => {
|
||||
// 控制是否显示侧边栏
|
||||
if (appStore.mainAppProps.hideSider) {
|
||||
return false;
|
||||
}
|
||||
return unref(getSplit) ? !unref(getMenuHidden) : true;
|
||||
});
|
||||
|
||||
@ -74,6 +84,8 @@
|
||||
{
|
||||
[`${prefixCls}--fixed`]: unref(getMenuFixed),
|
||||
[`${prefixCls}--mix`]: unref(getIsMixMode) && !unref(getIsMobile),
|
||||
// 【JEECG作为乾坤子应用】
|
||||
[`${prefixCls}--qiankun-micro`]: glob.isQiankunMicro,
|
||||
},
|
||||
];
|
||||
});
|
||||
@ -131,6 +143,11 @@
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
// 【JEECG作为乾坤子应用】
|
||||
&--qiankun-micro {
|
||||
position: absolute !important;
|
||||
}
|
||||
|
||||
&--mix {
|
||||
top: @header-height;
|
||||
height: calc(100% - @header-height);
|
||||
|
||||
@ -145,7 +145,9 @@ html[data-theme='light'] {
|
||||
}
|
||||
|
||||
.ant-tabs-extra-content {
|
||||
margin-top: 2px;
|
||||
// update-begin--author:liaozhiyang---date:20241016---for:【issues/7345】标签样式切换到极简模式样式错乱
|
||||
// margin-top: 2px;
|
||||
// update-end--author:liaozhiyang---date:20241016---for:【issues/7345】标签样式切换到极简模式样式错乱
|
||||
line-height: @multiple-height !important;
|
||||
}
|
||||
|
||||
|
||||
@ -19,18 +19,20 @@
|
||||
</template>
|
||||
|
||||
<template #rightExtra v-if="getShowRedo || getShowQuick">
|
||||
<TabRedo v-if="getShowRedo" />
|
||||
<!-- <TabContent isExtra :tabItem="$route" v-if="getShowQuick" /> -->
|
||||
<!-- 列表页全屏
|
||||
<FoldButton v-if="getShowFold" />-->
|
||||
<!-- <FullscreenOutlined /> -->
|
||||
<router-link to="/ai" class="ai-icon">
|
||||
<a-tooltip title="AI助手" placement="left">
|
||||
<svg t="1706259688149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2056" width="17" height="17">
|
||||
<path d="M826.368 325.632c0-7.168 2.048-10.24 10.24-10.24h123.904c7.168 0 10.24 2.048 10.24 10.24v621.568c0 7.168-2.048 10.24-10.24 10.24h-122.88c-8.192 0-10.24-4.096-10.24-10.24l-1.024-621.568z m-8.192-178.176c0-50.176 35.84-79.872 79.872-79.872 48.128 0 79.872 32.768 79.872 79.872 0 52.224-33.792 79.872-81.92 79.872-46.08 1.024-77.824-27.648-77.824-79.872zM462.848 584.704C441.344 497.664 389.12 307.2 368.64 215.04h-2.048c-16.384 92.16-58.368 247.808-92.16 369.664h188.416zM243.712 712.704l-62.464 236.544c-2.048 7.168-4.096 8.192-12.288 8.192H54.272c-8.192 0-10.24-2.048-8.192-12.288l224.256-783.36c4.096-13.312 7.168-26.624 8.192-65.536 0-6.144 2.048-8.192 7.168-8.192H450.56c6.144 0 8.192 2.048 10.24 8.192l250.88 849.92c2.048 7.168 0 10.24-7.168 10.24H573.44c-7.168 0-10.24-2.048-12.288-7.168l-65.536-236.544c1.024 1.024-251.904 0-251.904 0z" fill="#333333" p-id="19816"></path>
|
||||
</svg>
|
||||
</a-tooltip>
|
||||
</router-link>
|
||||
<div class="rightExtra">
|
||||
<TabRedo v-if="getShowRedo" />
|
||||
<!-- <TabContent isExtra :tabItem="$route" v-if="getShowQuick" /> -->
|
||||
<!-- 列表页全屏
|
||||
<FoldButton v-if="getShowFold" />-->
|
||||
<!-- <FullscreenOutlined /> -->
|
||||
<router-link to="/ai" class="ai-icon">
|
||||
<a-tooltip title="AI助手" placement="left">
|
||||
<svg t="1706259688149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2056" width="17" height="17">
|
||||
<path d="M826.368 325.632c0-7.168 2.048-10.24 10.24-10.24h123.904c7.168 0 10.24 2.048 10.24 10.24v621.568c0 7.168-2.048 10.24-10.24 10.24h-122.88c-8.192 0-10.24-4.096-10.24-10.24l-1.024-621.568z m-8.192-178.176c0-50.176 35.84-79.872 79.872-79.872 48.128 0 79.872 32.768 79.872 79.872 0 52.224-33.792 79.872-81.92 79.872-46.08 1.024-77.824-27.648-77.824-79.872zM462.848 584.704C441.344 497.664 389.12 307.2 368.64 215.04h-2.048c-16.384 92.16-58.368 247.808-92.16 369.664h188.416zM243.712 712.704l-62.464 236.544c-2.048 7.168-4.096 8.192-12.288 8.192H54.272c-8.192 0-10.24-2.048-8.192-12.288l224.256-783.36c4.096-13.312 7.168-26.624 8.192-65.536 0-6.144 2.048-8.192 7.168-8.192H450.56c6.144 0 8.192 2.048 10.24 8.192l250.88 849.92c2.048 7.168 0 10.24-7.168 10.24H573.44c-7.168 0-10.24-2.048-12.288-7.168l-65.536-236.544c1.024 1.024-251.904 0-251.904 0z" fill="#333333" p-id="19816"></path>
|
||||
</svg>
|
||||
</a-tooltip>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
</Tabs>
|
||||
</div>
|
||||
@ -162,16 +164,25 @@
|
||||
:deep(.anticon) {
|
||||
display: inline-block;
|
||||
}
|
||||
.ai-icon{
|
||||
float: right;
|
||||
margin-top: 3px;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
color: @text-color;
|
||||
text-align: center;
|
||||
border-left: 1px solid @border-color-base;
|
||||
// update-begin--author:liaozhiyang---date:20241016---for:【issues/7345】标签样式切换到极简模式样式错乱
|
||||
.rightExtra {
|
||||
display: flex;
|
||||
:deep(svg) {
|
||||
&:not(.icon) {
|
||||
vertical-align: -0.3em;
|
||||
}
|
||||
}
|
||||
.ai-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
width: 36px;
|
||||
color: @text-color;
|
||||
text-align: center;
|
||||
border-left: 1px solid @border-color-base;
|
||||
}
|
||||
}
|
||||
// update-end--author:liaozhiyang---date:20241016---for:【issues/7345】标签样式切换到极简模式样式错乱
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user