|
@@ -1,155 +1,161 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <div style="display: flex; flex-direction: column; height: 100%;">
|
|
|
|
|
|
|
+ <div style="display: flex; flex-direction: column; height: 100%">
|
|
|
<SystemSelect v-if="!getCollapsed" />
|
|
<SystemSelect v-if="!getCollapsed" />
|
|
|
- <Sider v-show="showClassSideBarRef" breakpoint="lg" collapsible :class="getSiderClass" :width="getMenuWidth"
|
|
|
|
|
- :collapsed="getCollapsed" :collapsedWidth="getCollapsedWidth" :theme="getMenuTheme"
|
|
|
|
|
- @breakpoint="onBreakpointChange">
|
|
|
|
|
|
|
+ <Sider
|
|
|
|
|
+ v-show="showClassSideBarRef"
|
|
|
|
|
+ breakpoint="lg"
|
|
|
|
|
+ collapsible
|
|
|
|
|
+ :class="getSiderClass"
|
|
|
|
|
+ :width="getMenuWidth"
|
|
|
|
|
+ :collapsed="getCollapsed"
|
|
|
|
|
+ :collapsedWidth="getCollapsedWidth"
|
|
|
|
|
+ :theme="getMenuTheme"
|
|
|
|
|
+ @breakpoint="onBreakpointChange"
|
|
|
|
|
+ >
|
|
|
<LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" showSearch />
|
|
<LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" showSearch />
|
|
|
<template #trigger>
|
|
<template #trigger>
|
|
|
<LayoutTrigger />
|
|
<LayoutTrigger />
|
|
|
</template>
|
|
</template>
|
|
|
</Sider>
|
|
</Sider>
|
|
|
</div>
|
|
</div>
|
|
|
-
|
|
|
|
|
</template>
|
|
</template>
|
|
|
<script lang="ts">
|
|
<script lang="ts">
|
|
|
-import { computed, defineComponent, unref, CSSProperties } from 'vue';
|
|
|
|
|
-
|
|
|
|
|
-import { Layout } from 'ant-design-vue';
|
|
|
|
|
-import LayoutMenu from '../menu/index.vue';
|
|
|
|
|
-// import LayoutMenu from '../menu/SearchMenu.vue';
|
|
|
|
|
-import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
|
|
|
|
|
-
|
|
|
|
|
-import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
|
|
|
|
-
|
|
|
|
|
-import { useAppStore } from '@/store/modules/app';
|
|
|
|
|
-import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
|
|
|
-import { useSiderEvent } from './useLayoutSider';
|
|
|
|
|
-import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
|
|
-import SystemSelect from '../feature/SystemSelect.vue';
|
|
|
|
|
-
|
|
|
|
|
-// import DragBar from './DragBar.vue';
|
|
|
|
|
-
|
|
|
|
|
-export default defineComponent({
|
|
|
|
|
- name: 'LayoutSideBar',
|
|
|
|
|
- components: { Sider: Layout.Sider, LayoutMenu, LayoutTrigger, SystemSelect },
|
|
|
|
|
- setup() {
|
|
|
|
|
- // const dragBarRef = ref<ElRef>(null);
|
|
|
|
|
- // const sideRef = ref<ElRef>(null);
|
|
|
|
|
-
|
|
|
|
|
- const { getCollapsed, getMenuWidth, getSplit, getMenuTheme, getRealWidth, getMenuHidden, getMenuFixed, getIsMixMode, toggleCollapsed } =
|
|
|
|
|
- useMenuSetting();
|
|
|
|
|
-
|
|
|
|
|
- const { prefixCls } = useDesign('layout-sideBar');
|
|
|
|
|
-
|
|
|
|
|
- const appStore = useAppStore();
|
|
|
|
|
-
|
|
|
|
|
- // useDragLine(sideRef, dragBarRef);
|
|
|
|
|
-
|
|
|
|
|
- const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
|
|
|
|
|
-
|
|
|
|
|
- const getMode = computed(() => {
|
|
|
|
|
- return unref(getSplit) ? MenuModeEnum.INLINE : null;
|
|
|
|
|
- });
|
|
|
|
|
|
|
+ import { computed, defineComponent, unref, CSSProperties } from 'vue';
|
|
|
|
|
+
|
|
|
|
|
+ import { Layout } from 'ant-design-vue';
|
|
|
|
|
+ import LayoutMenu from '../menu/index.vue';
|
|
|
|
|
+ // import LayoutMenu from '../menu/SearchMenu.vue';
|
|
|
|
|
+ import LayoutTrigger from '/@/layouts/default/trigger/index.vue';
|
|
|
|
|
+
|
|
|
|
|
+ import { MenuModeEnum, MenuSplitTyeEnum } from '/@/enums/menuEnum';
|
|
|
|
|
+
|
|
|
|
|
+ import { useAppStore } from '@/store/modules/app';
|
|
|
|
|
+ import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
|
|
|
|
|
+ import { useSiderEvent } from './useLayoutSider';
|
|
|
|
|
+ import { useDesign } from '/@/hooks/web/useDesign';
|
|
|
|
|
+ import SystemSelect from '../feature/SystemSelect.vue';
|
|
|
|
|
+
|
|
|
|
|
+ // import DragBar from './DragBar.vue';
|
|
|
|
|
+
|
|
|
|
|
+ export default defineComponent({
|
|
|
|
|
+ name: 'LayoutSideBar',
|
|
|
|
|
+ components: { Sider: Layout.Sider, LayoutMenu, LayoutTrigger, SystemSelect },
|
|
|
|
|
+ setup() {
|
|
|
|
|
+ // const dragBarRef = ref<ElRef>(null);
|
|
|
|
|
+ // const sideRef = ref<ElRef>(null);
|
|
|
|
|
+
|
|
|
|
|
+ const { getCollapsed, getMenuWidth, getSplit, getMenuTheme, getRealWidth, getMenuHidden, getMenuFixed, getIsMixMode, toggleCollapsed } =
|
|
|
|
|
+ useMenuSetting();
|
|
|
|
|
+
|
|
|
|
|
+ const { prefixCls } = useDesign('layout-sideBar');
|
|
|
|
|
+
|
|
|
|
|
+ const appStore = useAppStore();
|
|
|
|
|
+
|
|
|
|
|
+ // useDragLine(sideRef, dragBarRef);
|
|
|
|
|
+
|
|
|
|
|
+ const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
|
|
|
|
|
+
|
|
|
|
|
+ const getMode = computed(() => {
|
|
|
|
|
+ return unref(getSplit) ? MenuModeEnum.INLINE : null;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const getSplitType = computed(() => {
|
|
|
|
|
+ return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const showClassSideBarRef = computed(() => {
|
|
|
|
|
+ // 控制是否显示侧边栏
|
|
|
|
|
+ if (appStore.getLayoutHideSider) {
|
|
|
|
|
+ return false;
|
|
|
|
|
+ }
|
|
|
|
|
+ return unref(getSplit) ? !unref(getMenuHidden) : true;
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const getSiderClass = computed(() => {
|
|
|
|
|
+ return [
|
|
|
|
|
+ prefixCls,
|
|
|
|
|
+ {
|
|
|
|
|
+ [`${prefixCls}--fixed`]: unref(getMenuFixed),
|
|
|
|
|
+ [`${prefixCls}--mix`]: unref(getIsMixMode),
|
|
|
|
|
+ },
|
|
|
|
|
+ ];
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ const getHiddenDomStyle = computed((): CSSProperties => {
|
|
|
|
|
+ const width = `${unref(getRealWidth)}px`;
|
|
|
|
|
+ return {
|
|
|
|
|
+ width: width,
|
|
|
|
|
+ overflow: 'hidden',
|
|
|
|
|
+ flex: `0 0 ${width}`,
|
|
|
|
|
+ maxWidth: width,
|
|
|
|
|
+ minWidth: width,
|
|
|
|
|
+ transition: 'all 0.2s',
|
|
|
|
|
+ };
|
|
|
|
|
+ });
|
|
|
|
|
+
|
|
|
|
|
+ // 在此处使用计算量可能会导致sider异常
|
|
|
|
|
+ // andv 更新后,如果trigger插槽可用,则此处代码可废弃
|
|
|
|
|
+ // const getTrigger = h(LayoutTrigger);
|
|
|
|
|
|
|
|
- const getSplitType = computed(() => {
|
|
|
|
|
- return unref(getSplit) ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE;
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- const showClassSideBarRef = computed(() => {
|
|
|
|
|
- // 控制是否显示侧边栏
|
|
|
|
|
- if (appStore.getLayoutHideSider) {
|
|
|
|
|
- return false;
|
|
|
|
|
- }
|
|
|
|
|
- return unref(getSplit) ? !unref(getMenuHidden) : true;
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- const getSiderClass = computed(() => {
|
|
|
|
|
- return [
|
|
|
|
|
- prefixCls,
|
|
|
|
|
- {
|
|
|
|
|
- [`${prefixCls}--fixed`]: unref(getMenuFixed),
|
|
|
|
|
- [`${prefixCls}--mix`]: unref(getIsMixMode),
|
|
|
|
|
- },
|
|
|
|
|
- ];
|
|
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- const getHiddenDomStyle = computed((): CSSProperties => {
|
|
|
|
|
- const width = `${unref(getRealWidth)}px`;
|
|
|
|
|
return {
|
|
return {
|
|
|
- width: width,
|
|
|
|
|
- overflow: 'hidden',
|
|
|
|
|
- flex: `0 0 ${width}`,
|
|
|
|
|
- maxWidth: width,
|
|
|
|
|
- minWidth: width,
|
|
|
|
|
- transition: 'all 0.2s',
|
|
|
|
|
|
|
+ prefixCls,
|
|
|
|
|
+ getHiddenDomStyle,
|
|
|
|
|
+ getSiderClass,
|
|
|
|
|
+ // getTrigger,
|
|
|
|
|
+ getCollapsedWidth,
|
|
|
|
|
+ getMenuFixed,
|
|
|
|
|
+ showClassSideBarRef,
|
|
|
|
|
+ getMenuWidth,
|
|
|
|
|
+ getCollapsed,
|
|
|
|
|
+ getMenuTheme,
|
|
|
|
|
+ onBreakpointChange,
|
|
|
|
|
+ getMode,
|
|
|
|
|
+ getSplitType,
|
|
|
|
|
+ toggleCollapsed,
|
|
|
};
|
|
};
|
|
|
- });
|
|
|
|
|
-
|
|
|
|
|
- // 在此处使用计算量可能会导致sider异常
|
|
|
|
|
- // andv 更新后,如果trigger插槽可用,则此处代码可废弃
|
|
|
|
|
- // const getTrigger = h(LayoutTrigger);
|
|
|
|
|
-
|
|
|
|
|
- return {
|
|
|
|
|
- prefixCls,
|
|
|
|
|
- getHiddenDomStyle,
|
|
|
|
|
- getSiderClass,
|
|
|
|
|
- // getTrigger,
|
|
|
|
|
- getCollapsedWidth,
|
|
|
|
|
- getMenuFixed,
|
|
|
|
|
- showClassSideBarRef,
|
|
|
|
|
- getMenuWidth,
|
|
|
|
|
- getCollapsed,
|
|
|
|
|
- getMenuTheme,
|
|
|
|
|
- onBreakpointChange,
|
|
|
|
|
- getMode,
|
|
|
|
|
- getSplitType,
|
|
|
|
|
- toggleCollapsed,
|
|
|
|
|
-
|
|
|
|
|
- };
|
|
|
|
|
- },
|
|
|
|
|
-});
|
|
|
|
|
|
|
+ },
|
|
|
|
|
+ });
|
|
|
</script>
|
|
</script>
|
|
|
<style lang="less">
|
|
<style lang="less">
|
|
|
-@prefix-cls: ~'@{namespace}-layout-sideBar';
|
|
|
|
|
|
|
+ @prefix-cls: ~'@{namespace}-layout-sideBar';
|
|
|
|
|
|
|
|
-.@{prefix-cls} {
|
|
|
|
|
- border-top-left-radius: 10px;
|
|
|
|
|
- border-bottom-left-radius: 10px;
|
|
|
|
|
- z-index: @layout-sider-fixed-z-index;
|
|
|
|
|
- flex: 1 !important;
|
|
|
|
|
|
|
+ .@{prefix-cls} {
|
|
|
|
|
+ border-top-left-radius: 10px;
|
|
|
|
|
+ border-bottom-left-radius: 10px;
|
|
|
|
|
+ z-index: @layout-sider-fixed-z-index;
|
|
|
|
|
+ flex: 1 !important;
|
|
|
|
|
|
|
|
- &.ant-layout-sider-dark {
|
|
|
|
|
- background-color: @sider-dark-bg-color;
|
|
|
|
|
|
|
+ &.ant-layout-sider-dark {
|
|
|
|
|
+ background-color: @sider-dark-bg-color;
|
|
|
|
|
|
|
|
- .ant-layout-sider-trigger {
|
|
|
|
|
- color: darken(@white, 25%);
|
|
|
|
|
- background-color: @trigger-dark-bg-color;
|
|
|
|
|
|
|
+ .ant-layout-sider-trigger {
|
|
|
|
|
+ color: darken(@white, 25%);
|
|
|
|
|
+ background-color: @trigger-dark-bg-color;
|
|
|
|
|
|
|
|
- &:hover {
|
|
|
|
|
- color: @white;
|
|
|
|
|
- background-color: @trigger-dark-hover-bg-color;
|
|
|
|
|
|
|
+ &:hover {
|
|
|
|
|
+ color: @white;
|
|
|
|
|
+ background-color: @trigger-dark-hover-bg-color;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- &:not(.ant-layout-sider-dark) {
|
|
|
|
|
- // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
|
|
|
|
|
|
+ &:not(.ant-layout-sider-dark) {
|
|
|
|
|
+ // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
|
|
|
|
|
|
|
- .ant-layout-sider-trigger {
|
|
|
|
|
- color: @text-color-base;
|
|
|
|
|
- border-top: 1px solid @border-color-light;
|
|
|
|
|
|
|
+ .ant-layout-sider-trigger {
|
|
|
|
|
+ color: @text-color-base;
|
|
|
|
|
+ border-top: 1px solid @border-color-light;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- }
|
|
|
|
|
|
|
|
|
|
- .ant-layout-sider-zero-width-trigger {
|
|
|
|
|
- top: 40%;
|
|
|
|
|
- z-index: 10;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ .ant-layout-sider-zero-width-trigger {
|
|
|
|
|
+ top: 40%;
|
|
|
|
|
+ z-index: 10;
|
|
|
|
|
+ }
|
|
|
|
|
|
|
|
- & .ant-layout-sider-trigger {
|
|
|
|
|
- // height: 36px;
|
|
|
|
|
- line-height: 36px;
|
|
|
|
|
|
|
+ & .ant-layout-sider-trigger {
|
|
|
|
|
+ // height: 36px;
|
|
|
|
|
+ line-height: 36px;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
-}
|
|
|
|
|
</style>
|
|
</style>
|