提交本地代码
This commit is contained in:
wangchengming
parent
a2bd03031d
commit
48d0a2301f
2
.env
2
.env
|
|
@ -5,7 +5,7 @@ VITE_PORT = 3100
|
|||
VITE_GLOB_APP_TITLE = JeecgBoot 企业级低代码平台
|
||||
|
||||
# 简称，此变量只能是字符/下划线
|
||||
VITE_GLOB_APP_SHORT_NAME = JeecgBoot_Pro
|
||||
VITE_GLOB_APP_SHORT_NAME = 放射性源项分析系统
|
||||
|
||||
# 单点登录服务端地址
|
||||
VITE_GLOB_APP_CAS_BASE_URL=http://cas.test.com:8443/cas
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 7.3 KiB After Width: | Height: | Size: 10 KiB |
BIN
src/assets/images/main-bg.jpg
Normal file
BIN
src/assets/images/main-bg.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 91 KiB |
BIN
src/assets/images/nav-bg.png
Normal file
BIN
src/assets/images/nav-bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 128 KiB |
|
|
@ -11,83 +11,113 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { computed, unref } from 'vue';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { useGo } from '/@/hooks/web/usePage';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { computed, unref } from 'vue';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { useGo } from '/@/hooks/web/usePage';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { PageEnum } from '/@/enums/pageEnum';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
|
||||
const props = defineProps({
|
||||
/**
|
||||
* The theme of the current parent component
|
||||
*/
|
||||
theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
|
||||
/**
|
||||
* Whether to show title
|
||||
*/
|
||||
showTitle: { type: Boolean, default: true },
|
||||
/**
|
||||
* The title is also displayed when the menu is collapsed
|
||||
*/
|
||||
alwaysShowTitle: { type: Boolean },
|
||||
});
|
||||
const props = defineProps({
|
||||
/**
|
||||
* The theme of the current parent component
|
||||
*/
|
||||
theme: { type: String, validator: (v: string) => ['light', 'dark'].includes(v) },
|
||||
/**
|
||||
* Whether to show title
|
||||
*/
|
||||
showTitle: { type: Boolean, default: true },
|
||||
/**
|
||||
* The title is also displayed when the menu is collapsed
|
||||
*/
|
||||
alwaysShowTitle: { type: Boolean },
|
||||
});
|
||||
|
||||
const { prefixCls } = useDesign('app-logo');
|
||||
const { getCollapsedShowTitle } = useMenuSetting();
|
||||
const userStore = useUserStore();
|
||||
const { title, shortTitle } = useGlobSetting();
|
||||
const { prefixCls } = useDesign('app-logo');
|
||||
const { getCollapsedShowTitle } = useMenuSetting();
|
||||
const userStore = useUserStore();
|
||||
const { title, shortTitle } = useGlobSetting();
|
||||
console.log('shortTitle', shortTitle)
|
||||
const go = useGo();
|
||||
|
||||
const go = useGo();
|
||||
const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]);
|
||||
|
||||
const getAppLogoClass = computed(() => [prefixCls, props.theme, { 'collapsed-show-title': unref(getCollapsedShowTitle) }]);
|
||||
const getTitleClass = computed(() => [
|
||||
`${prefixCls}__title`,
|
||||
{
|
||||
'xs:opacity-0': !props.alwaysShowTitle,
|
||||
},
|
||||
]);
|
||||
|
||||
const getTitleClass = computed(() => [
|
||||
`${prefixCls}__title`,
|
||||
{
|
||||
'xs:opacity-0': !props.alwaysShowTitle,
|
||||
},
|
||||
]);
|
||||
|
||||
function goHome() {
|
||||
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
|
||||
}
|
||||
function goHome() {
|
||||
go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@prefix-cls: ~'@{namespace}-app-logo';
|
||||
@prefix-cls: ~'@{namespace}-app-logo';
|
||||
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 7px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
//左侧菜单模式和左侧菜单混合模式加渐变背景色
|
||||
&.jeecg-layout-mix-sider-logo,&.jeecg-layout-menu-logo{
|
||||
background:@sider-logo-bg-color;
|
||||
}
|
||||
// &.light {
|
||||
// border-bottom: 1px solid @border-color-base;
|
||||
// }
|
||||
.@{prefix-cls} {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 7px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
|
||||
&.collapsed-show-title {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&.light &__title {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&.dark &__title {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: all 0.5s;
|
||||
line-height: normal;
|
||||
}
|
||||
//左侧菜单模式和左侧菜单混合模式加渐变背景色
|
||||
&.jeecg-layout-mix-sider-logo,
|
||||
&.jeecg-layout-menu-logo {
|
||||
background: @sider-logo-bg-color;
|
||||
}
|
||||
|
||||
// &.light {
|
||||
// border-bottom: 1px solid @border-color-base;
|
||||
// }
|
||||
|
||||
&.collapsed-show-title {
|
||||
padding-left: 20px;
|
||||
}
|
||||
|
||||
&.light &__title {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&.dark &__title {
|
||||
color: @white;
|
||||
}
|
||||
|
||||
&__title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
transition: all 0.5s;
|
||||
line-height: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.jeecg-app-logo__title {
|
||||
font-family: MicrosoftYaHei-Bold;
|
||||
font-size: 24px;
|
||||
font-weight: normal;
|
||||
font-stretch: normal;
|
||||
line-height: 43px;
|
||||
letter-spacing: 2px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.jeecg-layout-header-logo {
|
||||
height: 74px !important;
|
||||
min-width: 192px;
|
||||
padding: 0 10px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.jeecg-layout-header-logo img {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
margin-right: 2px;
|
||||
}
|
||||
|
||||
.jeecg-layout-header-logo:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -788,4 +788,5 @@ export default [
|
|||
'ant-design:zhihu-square-filled',
|
||||
'ant-design:zoom-in-outlined',
|
||||
'ant-design:zoom-out-outlined',
|
||||
'ant-design:event-simulation'
|
||||
];
|
||||
|
|
|
|||
|
|
@ -1,34 +1,35 @@
|
|||
<template>
|
||||
<span :class="`${prefixCls}- flex items-center `">
|
||||
<Icon v-if="getIcon" :icon="getIcon" :size="18" :class="`${prefixCls}-wrapper__icon mr-2`" />
|
||||
<div :class="`${prefixCls}- flex items-center `">
|
||||
<Icon v-if="getIcon" :icon="getIcon" :size="36" :class="`${prefixCls}-wrapper__icon`" />
|
||||
{{ getI18nName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
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';
|
||||
const { t } = useI18n();
|
||||
import Icon from '/@/components/Icon/index';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { contentProps } from '../props';
|
||||
const { t } = useI18n();
|
||||
|
||||
export default defineComponent({
|
||||
name: 'MenuItemContent',
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
props: contentProps,
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('basic-menu-item-content');
|
||||
const getI18nName = computed(() => t(props.item?.name));
|
||||
const getIcon = computed(() => props.item?.icon);
|
||||
export default defineComponent({
|
||||
name: 'MenuItemContent',
|
||||
components: {
|
||||
Icon,
|
||||
},
|
||||
props: contentProps,
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('basic-menu-item-content');
|
||||
const getI18nName = computed(() => t(props.item?.name));
|
||||
const getIcon = computed(() => props.item?.icon);
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
getI18nName,
|
||||
getIcon,
|
||||
};
|
||||
},
|
||||
});
|
||||
return {
|
||||
prefixCls,
|
||||
getI18nName,
|
||||
getIcon,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
|
@ -19,7 +19,8 @@
|
|||
&.ant-menu-dark {
|
||||
background-color: transparent;
|
||||
// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部菜单模式文字调整
|
||||
color: rgba(255 ,255 ,255, 1);
|
||||
color: rgba(255, 255, 255, 1);
|
||||
|
||||
// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶部菜单模式文字调整
|
||||
.ant-menu-submenu:hover,
|
||||
.ant-menu-item-open,
|
||||
|
|
@ -33,6 +34,7 @@
|
|||
.ant-menu-submenu-title:hover {
|
||||
color: #fff;
|
||||
background-color: @top-menu-active-bg-color !important;
|
||||
border: solid 1px rgba(5, 255, 184, 0.46);
|
||||
}
|
||||
|
||||
.ant-menu-item:hover,
|
||||
|
|
@ -41,6 +43,7 @@
|
|||
.ant-menu-submenu-active,
|
||||
.ant-menu-submenu-title:hover {
|
||||
background-color: @top-menu-active-bg-color;
|
||||
border: solid 1px rgba(5, 255, 184, 0.46);
|
||||
}
|
||||
|
||||
.@{basic-menu-prefix-cls}-item__level1 {
|
||||
|
|
@ -48,16 +51,19 @@
|
|||
|
||||
&.ant-menu-item-selected,
|
||||
&.ant-menu-submenu-selected {
|
||||
color: #fff;
|
||||
background-color: @top-menu-active-bg-color !important;
|
||||
border: solid 1px rgba(5, 255, 184, 0.46);
|
||||
}
|
||||
}
|
||||
|
||||
.ant-menu-item,
|
||||
.ant-menu-submenu {
|
||||
|
||||
&.@{basic-menu-prefix-cls}-item__level1,
|
||||
.ant-menu-submenu-title {
|
||||
height: @header-height;
|
||||
line-height: @header-height;
|
||||
height: 74px; //@header-height;
|
||||
line-height: 74px; //@header-height;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -58,7 +58,7 @@ html {
|
|||
@header-light-desc-color: #7c8087;
|
||||
@header-light-bottom-border-color: #eee;
|
||||
// top-menu
|
||||
@top-menu-active-bg-color: var(--header-active-menu-bg-color);
|
||||
@top-menu-active-bg-color: #2e6663; // var(--header-active-menu-bg-color);
|
||||
|
||||
// =================================
|
||||
// ==============Menu============
|
||||
|
|
|
|||
|
|
@ -14,7 +14,7 @@
|
|||
|
||||
// headers
|
||||
// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
@header-height: 60px;
|
||||
@header-height: 89px;
|
||||
// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
|
||||
// logo width
|
||||
|
|
|
|||
|
|
@ -7,60 +7,67 @@
|
|||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import PageLayout from '/@/layouts/page/index.vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
|
||||
import { useContentViewHeight } from './useContentViewHeight';
|
||||
// import registerApps from '/@/qiankun';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
export default defineComponent({
|
||||
name: 'LayoutContent',
|
||||
components: { PageLayout },
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('layout-content');
|
||||
const { getOpenPageLoading } = useTransitionSetting();
|
||||
const { getLayoutContentMode, getPageLoading } = useRootSetting();
|
||||
const globSetting = useGlobSetting();
|
||||
const openQianKun = globSetting.openQianKun;
|
||||
useContentViewHeight();
|
||||
onMounted(() => {
|
||||
// //注册openQianKun
|
||||
// if (openQianKun == 'true') {
|
||||
// if (!window.qiankunStarted) {
|
||||
// window.qiankunStarted = true;
|
||||
// registerApps();
|
||||
// }
|
||||
// }
|
||||
});
|
||||
return {
|
||||
prefixCls,
|
||||
openQianKun,
|
||||
getOpenPageLoading,
|
||||
getLayoutContentMode,
|
||||
getPageLoading,
|
||||
};
|
||||
},
|
||||
});
|
||||
import { defineComponent, onMounted } from 'vue';
|
||||
import PageLayout from '/@/layouts/page/index.vue';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||
import { useTransitionSetting } from '/@/hooks/setting/useTransitionSetting';
|
||||
import { useContentViewHeight } from './useContentViewHeight';
|
||||
// import registerApps from '/@/qiankun';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
export default defineComponent({
|
||||
name: 'LayoutContent',
|
||||
components: { PageLayout },
|
||||
setup() {
|
||||
const { prefixCls } = useDesign('layout-content');
|
||||
const { getOpenPageLoading } = useTransitionSetting();
|
||||
const { getLayoutContentMode, getPageLoading } = useRootSetting();
|
||||
const globSetting = useGlobSetting();
|
||||
const openQianKun = globSetting.openQianKun;
|
||||
useContentViewHeight();
|
||||
onMounted(() => {
|
||||
// //注册openQianKun
|
||||
// if (openQianKun == 'true') {
|
||||
// if (!window.qiankunStarted) {
|
||||
// window.qiankunStarted = true;
|
||||
// registerApps();
|
||||
// }
|
||||
// }
|
||||
});
|
||||
return {
|
||||
prefixCls,
|
||||
openQianKun,
|
||||
getOpenPageLoading,
|
||||
getLayoutContentMode,
|
||||
getPageLoading,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@prefix-cls: ~'@{namespace}-layout-content';
|
||||
@prefix-cls: ~'@{namespace}-layout-content';
|
||||
|
||||
.@{prefix-cls} {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
.@{prefix-cls} {
|
||||
position: relative;
|
||||
flex: 1 1 auto;
|
||||
min-height: 0;
|
||||
margin-top: -56px;
|
||||
padding-top: 103px;
|
||||
margin-left: -1px;
|
||||
|
||||
&.fixed {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
background-image: url(../../../assets/images/main-bg.jpg);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&-loading {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
z-index: @page-loading-z-index;
|
||||
}
|
||||
&.fixed {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
&-loading {
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
z-index: @page-loading-z-index;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,260 +1,318 @@
|
|||
<template>
|
||||
<Header :class="getHeaderClass">
|
||||
<!-- left start -->
|
||||
<div :class="`${prefixCls}-left`">
|
||||
<!-- logo -->
|
||||
<AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme" :style="getLogoWidth" />
|
||||
<LayoutTrigger
|
||||
v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
|
||||
:theme="getHeaderTheme"
|
||||
:sider="false"
|
||||
/>
|
||||
<LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
|
||||
<!-- 欢迎语 -->
|
||||
<span v-if="getShowContent && getShowBreadTitle && !getIsMobile" :class="[prefixCls, `${prefixCls}--${getHeaderTheme}`,'headerIntroductionClass']"> {{t('layout.header.welcomeIn')}} {{ title }} </span>
|
||||
</div>
|
||||
<!-- left end -->
|
||||
<div class="my-header">
|
||||
<!-- left start -->
|
||||
<div :class="`${prefixCls}-left`">
|
||||
<!-- logo -->
|
||||
<AppLogo v-if="getShowHeaderLogo || getIsMobile" :class="`${prefixCls}-logo`" :theme="getHeaderTheme"
|
||||
:style="getLogoWidth" />
|
||||
<LayoutTrigger v-if="(getShowContent && getShowHeaderTrigger && !getSplit && !getIsMixSidebar) || getIsMobile"
|
||||
:theme="getHeaderTheme" :sider="false" />
|
||||
<LayoutBreadcrumb v-if="getShowContent && getShowBread" :theme="getHeaderTheme" />
|
||||
<!-- 欢迎语 -->
|
||||
<span v-if="getShowContent && getShowBreadTitle && !getIsMobile"
|
||||
:class="[prefixCls, `${prefixCls}--${getHeaderTheme}`, 'headerIntroductionClass']">
|
||||
{{ t('layout.header.welcomeIn') }} {{ title }} </span>
|
||||
</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 -->
|
||||
<!-- 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 :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
|
||||
<!-- action -->
|
||||
<div :class="`${prefixCls}-action`">
|
||||
<AppSearch :class="`${prefixCls}-action__item `" v-if="getShowSearch" />
|
||||
|
||||
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
||||
<ErrorAction v-if="getUseErrorHandle" :class="`${prefixCls}-action__item error-action`" />
|
||||
|
||||
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
||||
<Notify v-if="getShowNotice" :class="`${prefixCls}-action__item notify-item`" />
|
||||
|
||||
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
||||
<FullScreen v-if="getShowFullScreen" :class="`${prefixCls}-action__item fullscreen-item`" />
|
||||
|
||||
<LockScreen v-if="getUseLockPage" />
|
||||
<LockScreen v-if="getUseLockPage" />
|
||||
|
||||
<AppLocalePicker v-if="getShowLocalePicker" :reload="true" :showText="false" :class="`${prefixCls}-action__item`" />
|
||||
<AppLocalePicker v-if="getShowLocalePicker" :reload="true" :showText="false"
|
||||
:class="`${prefixCls}-action__item`" />
|
||||
|
||||
<UserDropDown :theme="getHeaderTheme" />
|
||||
<UserDropDown :theme="getHeaderTheme" />
|
||||
|
||||
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
|
||||
<!-- ai助手
|
||||
<SettingDrawer v-if="getShowSetting" :class="`${prefixCls}-action__item`" />
|
||||
<!-- ai助手
|
||||
<Aide></Aide> -->
|
||||
</div>
|
||||
</div>
|
||||
</Header>
|
||||
<LoginSelect ref="loginSelectRef" @success="loginSelectOk"></LoginSelect>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
import { defineComponent, unref, computed, ref, onMounted, toRaw } from 'vue';
|
||||
import { useGlobSetting } from '/@/hooks/setting';
|
||||
import { propTypes } from '/@/utils/propTypes';
|
||||
|
||||
import { Layout } from 'ant-design-vue';
|
||||
import { AppLogo } from '/@/components/Application';
|
||||
import LayoutMenu from '../menu/index.vue';
|
||||
import LayoutTrigger from '../trigger/index.vue';
|
||||
import { Layout } from 'ant-design-vue';
|
||||
import { AppLogo } from '/@/components/Application';
|
||||
import LayoutMenu from '../menu/index.vue';
|
||||
import LayoutTrigger from '../trigger/index.vue';
|
||||
|
||||
import { AppSearch } from '/@/components/Application';
|
||||
import { AppSearch } from '/@/components/Application';
|
||||
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||
import { useHeaderSetting } from '/@/hooks/setting/useHeaderSetting';
|
||||
import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
||||
import { useRootSetting } from '/@/hooks/setting/useRootSetting';
|
||||
|
||||
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
||||
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
|
||||
import { AppLocalePicker } from '/@/components/Application';
|
||||
import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
||||
import { SettingButtonPositionEnum } from '/@/enums/appEnum';
|
||||
import { AppLocalePicker } from '/@/components/Application';
|
||||
|
||||
import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
import { UserDropDown, LayoutBreadcrumb, FullScreen, Notify, ErrorAction, LockScreen } from './components';
|
||||
import { useAppInject } from '/@/hooks/web/useAppInject';
|
||||
import { useDesign } from '/@/hooks/web/useDesign';
|
||||
|
||||
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
||||
import { useLocale } from '/@/locales/useLocale';
|
||||
import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent';
|
||||
import { useLocale } from '/@/locales/useLocale';
|
||||
|
||||
import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import Aide from "@/views/dashboard/ai/components/aide/index.vue"
|
||||
const { t } = useI18n();
|
||||
import LoginSelect from '/@/views/sys/login/LoginSelect.vue';
|
||||
import { useUserStore } from '/@/store/modules/user';
|
||||
import { useI18n } from '/@/hooks/web/useI18n';
|
||||
import Aide from "@/views/dashboard/ai/components/aide/index.vue"
|
||||
const { t } = useI18n();
|
||||
|
||||
export default defineComponent({
|
||||
name: 'LayoutHeader',
|
||||
components: {
|
||||
Header: Layout.Header,
|
||||
AppLogo,
|
||||
LayoutTrigger,
|
||||
LayoutBreadcrumb,
|
||||
LayoutMenu,
|
||||
UserDropDown,
|
||||
AppLocalePicker,
|
||||
FullScreen,
|
||||
Notify,
|
||||
AppSearch,
|
||||
ErrorAction,
|
||||
LockScreen,
|
||||
LoginSelect,
|
||||
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
|
||||
loading: true,
|
||||
}),
|
||||
Aide
|
||||
},
|
||||
props: {
|
||||
fixed: propTypes.bool,
|
||||
},
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('layout-header');
|
||||
const userStore = useUserStore();
|
||||
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
|
||||
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
|
||||
const { title } = useGlobSetting();
|
||||
export default defineComponent({
|
||||
name: 'LayoutHeader',
|
||||
components: {
|
||||
Header: Layout.Header,
|
||||
AppLogo,
|
||||
LayoutTrigger,
|
||||
LayoutBreadcrumb,
|
||||
LayoutMenu,
|
||||
UserDropDown,
|
||||
AppLocalePicker,
|
||||
FullScreen,
|
||||
Notify,
|
||||
AppSearch,
|
||||
ErrorAction,
|
||||
LockScreen,
|
||||
LoginSelect,
|
||||
SettingDrawer: createAsyncComponent(() => import('/@/layouts/default/setting/index.vue'), {
|
||||
loading: true,
|
||||
}),
|
||||
Aide
|
||||
},
|
||||
props: {
|
||||
fixed: propTypes.bool,
|
||||
},
|
||||
setup(props) {
|
||||
const { prefixCls } = useDesign('layout-header');
|
||||
const userStore = useUserStore();
|
||||
const { getShowTopMenu, getShowHeaderTrigger, getSplit, getIsMixMode, getMenuWidth, getIsMixSidebar } = useMenuSetting();
|
||||
const { getUseErrorHandle, getShowSettingButton, getSettingButtonPosition } = useRootSetting();
|
||||
const { title } = useGlobSetting();
|
||||
|
||||
const {
|
||||
getHeaderTheme,
|
||||
getShowFullScreen,
|
||||
getShowNotice,
|
||||
getShowContent,
|
||||
getShowBread,
|
||||
getShowHeaderLogo,
|
||||
getShowHeader,
|
||||
getShowSearch,
|
||||
getUseLockPage,
|
||||
getShowBreadTitle,
|
||||
} = useHeaderSetting();
|
||||
const {
|
||||
getHeaderTheme,
|
||||
getShowFullScreen,
|
||||
getShowNotice,
|
||||
getShowContent,
|
||||
getShowBread,
|
||||
getShowHeaderLogo,
|
||||
getShowHeader,
|
||||
getShowSearch,
|
||||
getUseLockPage,
|
||||
getShowBreadTitle,
|
||||
} = useHeaderSetting();
|
||||
|
||||
const { getShowLocalePicker } = useLocale();
|
||||
const { getShowLocalePicker } = useLocale();
|
||||
|
||||
const { getIsMobile } = useAppInject();
|
||||
const { getIsMobile } = useAppInject();
|
||||
|
||||
const getHeaderClass = computed(() => {
|
||||
const theme = unref(getHeaderTheme);
|
||||
return [
|
||||
prefixCls,
|
||||
{
|
||||
[`${prefixCls}--fixed`]: props.fixed,
|
||||
[`${prefixCls}--mobile`]: unref(getIsMobile),
|
||||
[`${prefixCls}--${theme}`]: theme,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const getShowSetting = computed(() => {
|
||||
if (!unref(getShowSettingButton)) {
|
||||
return false;
|
||||
}
|
||||
const settingButtonPosition = unref(getSettingButtonPosition);
|
||||
|
||||
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
|
||||
return unref(getShowHeader);
|
||||
}
|
||||
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
|
||||
});
|
||||
|
||||
const getLogoWidth = computed(() => {
|
||||
if (!unref(getIsMixMode) || unref(getIsMobile)) {
|
||||
return {};
|
||||
}
|
||||
const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
|
||||
return { width: `${width}px` };
|
||||
});
|
||||
|
||||
const getSplitType = computed(() => {
|
||||
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
|
||||
});
|
||||
|
||||
const getMenuMode = computed(() => {
|
||||
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
|
||||
});
|
||||
|
||||
/**
|
||||
* 首页多租户部门弹窗逻辑
|
||||
*/
|
||||
const loginSelectRef = ref();
|
||||
|
||||
function showLoginSelect() {
|
||||
//update-begin---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
|
||||
//判断是否是登陆进来
|
||||
const loginInfo = toRaw(userStore.getLoginInfo) || {};
|
||||
if (!!loginInfo.isLogin) {
|
||||
loginSelectRef.value.show(loginInfo);
|
||||
}
|
||||
//update-end---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
|
||||
}
|
||||
|
||||
function loginSelectOk() {
|
||||
console.log('成功。。。。。');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
showLoginSelect();
|
||||
});
|
||||
|
||||
return {
|
||||
const getHeaderClass = computed(() => {
|
||||
const theme = unref(getHeaderTheme);
|
||||
return [
|
||||
prefixCls,
|
||||
getHeaderClass,
|
||||
getShowHeaderLogo,
|
||||
getHeaderTheme,
|
||||
getShowHeaderTrigger,
|
||||
getIsMobile,
|
||||
getShowBreadTitle,
|
||||
getShowBread,
|
||||
getShowContent,
|
||||
getSplitType,
|
||||
getSplit,
|
||||
getMenuMode,
|
||||
getShowTopMenu,
|
||||
getShowLocalePicker,
|
||||
getShowFullScreen,
|
||||
getShowNotice,
|
||||
getUseErrorHandle,
|
||||
getLogoWidth,
|
||||
getIsMixSidebar,
|
||||
getShowSettingButton,
|
||||
getShowSetting,
|
||||
getShowSearch,
|
||||
getUseLockPage,
|
||||
loginSelectOk,
|
||||
loginSelectRef,
|
||||
title,
|
||||
t
|
||||
};
|
||||
},
|
||||
});
|
||||
{
|
||||
[`${prefixCls}--fixed`]: props.fixed,
|
||||
[`${prefixCls}--mobile`]: unref(getIsMobile),
|
||||
[`${prefixCls}--${theme}`]: theme,
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const getShowSetting = computed(() => {
|
||||
if (!unref(getShowSettingButton)) {
|
||||
return false;
|
||||
}
|
||||
const settingButtonPosition = unref(getSettingButtonPosition);
|
||||
|
||||
if (settingButtonPosition === SettingButtonPositionEnum.AUTO) {
|
||||
return unref(getShowHeader);
|
||||
}
|
||||
return settingButtonPosition === SettingButtonPositionEnum.HEADER;
|
||||
});
|
||||
|
||||
const getLogoWidth = computed(() => {
|
||||
if (!unref(getIsMixMode) || unref(getIsMobile)) {
|
||||
return {};
|
||||
}
|
||||
const width = unref(getMenuWidth) < 180 ? 180 : unref(getMenuWidth);
|
||||
return { width: `${width}px` };
|
||||
});
|
||||
|
||||
const getSplitType = computed(() => {
|
||||
return unref(getSplit) ? MenuSplitTyeEnum.TOP : MenuSplitTyeEnum.NONE;
|
||||
});
|
||||
|
||||
const getMenuMode = computed(() => {
|
||||
return unref(getSplit) ? MenuModeEnum.HORIZONTAL : null;
|
||||
});
|
||||
|
||||
/**
|
||||
* 首页多租户部门弹窗逻辑
|
||||
*/
|
||||
const loginSelectRef = ref();
|
||||
|
||||
function showLoginSelect() {
|
||||
//update-begin---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
|
||||
//判断是否是登陆进来
|
||||
const loginInfo = toRaw(userStore.getLoginInfo) || {};
|
||||
if (!!loginInfo.isLogin) {
|
||||
loginSelectRef.value.show(loginInfo);
|
||||
}
|
||||
//update-end---author:liusq Date:20220101 for：判断登录进来是否需要弹窗选择租户----
|
||||
}
|
||||
|
||||
function loginSelectOk() {
|
||||
console.log('成功。。。。。');
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
showLoginSelect();
|
||||
});
|
||||
|
||||
return {
|
||||
prefixCls,
|
||||
getHeaderClass,
|
||||
getShowHeaderLogo,
|
||||
getHeaderTheme,
|
||||
getShowHeaderTrigger,
|
||||
getIsMobile,
|
||||
getShowBreadTitle,
|
||||
getShowBread,
|
||||
getShowContent,
|
||||
getSplitType,
|
||||
getSplit,
|
||||
getMenuMode,
|
||||
getShowTopMenu,
|
||||
getShowLocalePicker,
|
||||
getShowFullScreen,
|
||||
getShowNotice,
|
||||
getUseErrorHandle,
|
||||
getLogoWidth,
|
||||
getIsMixSidebar,
|
||||
getShowSettingButton,
|
||||
getShowSetting,
|
||||
getShowSearch,
|
||||
getUseLockPage,
|
||||
loginSelectOk,
|
||||
loginSelectRef,
|
||||
title,
|
||||
t
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less">
|
||||
@import './index.less';
|
||||
//update-begin---author:scott ---date:2022-09-30 for：默认隐藏顶部菜单面包屑-----------
|
||||
//顶部欢迎语展示样式
|
||||
@prefix-cls: ~'@{namespace}-layout-header';
|
||||
@import './index.less';
|
||||
//update-begin---author:scott ---date:2022-09-30 for：默认隐藏顶部菜单面包屑-----------
|
||||
//顶部欢迎语展示样式
|
||||
@prefix-cls: ~'@{namespace}-layout-header';
|
||||
|
||||
.ant-layout .@{prefix-cls} {
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
height: @header-height;
|
||||
// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
align-items: center;
|
||||
.ant-layout .@{prefix-cls} {
|
||||
display: block;
|
||||
// padding: 0 8px;
|
||||
// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
height: @header-height;
|
||||
// margin-left: 1px !important;
|
||||
// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
// align-items: center;
|
||||
|
||||
.headerIntroductionClass {
|
||||
margin-right: 4px;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
background-image: url(../../../assets/images/nav-bg.png);
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
&--light {
|
||||
.headerIntroductionClass {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&--dark {
|
||||
.headerIntroductionClass {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
.anticon, .truncate {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
//update-end---author:scott ---date::2022-09-30 for：默认隐藏顶部菜单面包屑--------------
|
||||
.headerIntroductionClass {
|
||||
margin-right: 4px;
|
||||
margin-bottom: 2px;
|
||||
border-bottom: 0px;
|
||||
border-left: 0px;
|
||||
}
|
||||
|
||||
&--light {
|
||||
.headerIntroductionClass {
|
||||
color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
&--dark {
|
||||
.headerIntroductionClass {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
|
||||
.anticon,
|
||||
.truncate {
|
||||
color: rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
//update-end---author:scott ---date::2022-09-30 for：默认隐藏顶部菜单面包屑--------------
|
||||
}
|
||||
|
||||
.jeecg-layout-header--dark {
|
||||
background-color: transparent !important;
|
||||
border-left: 0px solid #d9d9d9 !important;
|
||||
}
|
||||
|
||||
.my-header {
|
||||
display: flex;
|
||||
padding: 0 8px;
|
||||
// update-begin--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
height: 74px;
|
||||
// update-end--author:liaozhiyang---date:20240407---for：【QQYUN-8762】顶栏高度
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jeecg-layout-header-action__item {
|
||||
display: flex !important;
|
||||
height: 74px !important;
|
||||
padding: 0 2px;
|
||||
font-size: 1.2em;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jeecg-layout-header-action__item:hover {
|
||||
background-color: transparent !important;
|
||||
}
|
||||
|
||||
.jeecg-header-user-dropdown {
|
||||
height: 74px !important;
|
||||
padding: 0 0 0 10px;
|
||||
padding-right: 10px;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.jeecg-basic-menu {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.jeecg-layout-header-action__item .ant-badge {
|
||||
height: 74px !important;
|
||||
line-height: 74px !important;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user