|
|
@@ -2,27 +2,33 @@
|
|
|
<div v-if="getMenuFixed && !getIsMobile" :style="getHiddenDomStyle" v-show="showClassSideBarRef"></div>
|
|
|
<Sider
|
|
|
v-show="showClassSideBarRef"
|
|
|
- ref="sideRef"
|
|
|
- breakpoint="lg"
|
|
|
- collapsible
|
|
|
:class="getSiderClass"
|
|
|
:width="getMenuWidth"
|
|
|
:collapsed="getCollapsed"
|
|
|
:collapsedWidth="getCollapsedWidth"
|
|
|
- :theme="getMenuTheme"
|
|
|
- @breakpoint="onBreakpointChange"
|
|
|
+ theme="light"
|
|
|
+ collapsible
|
|
|
+ breakpoint="lg"
|
|
|
:trigger="getTrigger"
|
|
|
+ @breakpoint="onBreakpointChange"
|
|
|
v-bind="getTriggerAttr"
|
|
|
>
|
|
|
<template #trigger v-if="getShowTrigger">
|
|
|
<LayoutTrigger />
|
|
|
</template>
|
|
|
- <LayoutMenu :theme="getMenuTheme" :menuMode="getMode" :splitType="getSplitType" />
|
|
|
- <DragBar ref="dragBarRef" />
|
|
|
+ <div class="sidebar-menu-wrap">
|
|
|
+ <LayoutMenu
|
|
|
+ theme="light"
|
|
|
+ :menuMode="getMode"
|
|
|
+ :splitType="getSplitType"
|
|
|
+ :collapse="false"
|
|
|
+ :force-expanded="true"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
</Sider>
|
|
|
</template>
|
|
|
<script lang="ts">
|
|
|
- import { computed, defineComponent, ref, unref, CSSProperties, h } from 'vue';
|
|
|
+ import { computed, defineComponent, h, unref, CSSProperties } from 'vue';
|
|
|
|
|
|
import { Layout } from 'ant-design-vue';
|
|
|
import LayoutMenu from '../menu/index.vue';
|
|
|
@@ -31,39 +37,22 @@
|
|
|
import { MenuModeEnum, MenuSplitTyeEnum } from '@/core/enums/menuEnum';
|
|
|
|
|
|
import { useMenuSetting } from '@/core/hooks/setting/useMenuSetting';
|
|
|
- import { useTrigger, useDragLine, useSiderEvent } from './useLayoutSider';
|
|
|
import { useAppInject } from '@/core/hooks/web/useAppInject';
|
|
|
import { useDesign } from '@/core/hooks/web/useDesign';
|
|
|
+ import { useSiderEvent, useTrigger } from './useLayoutSider';
|
|
|
|
|
|
- import DragBar from './DragBar.vue';
|
|
|
export default defineComponent({
|
|
|
name: 'LayoutSideBar',
|
|
|
- components: { Sider: Layout.Sider, LayoutMenu, DragBar, LayoutTrigger },
|
|
|
+ components: { Sider: Layout.Sider, LayoutMenu, LayoutTrigger },
|
|
|
setup() {
|
|
|
- const dragBarRef = ref<ElRef>(null);
|
|
|
- const sideRef = ref<ElRef>(null);
|
|
|
-
|
|
|
- const {
|
|
|
- getCollapsed,
|
|
|
- getMenuWidth,
|
|
|
- getSplit,
|
|
|
- getMenuTheme,
|
|
|
- getRealWidth,
|
|
|
- getMenuHidden,
|
|
|
- getMenuFixed,
|
|
|
- getIsMixMode,
|
|
|
- toggleCollapsed,
|
|
|
- } = useMenuSetting();
|
|
|
+ const { getMenuWidth, getSplit, getMenuHidden, getMenuFixed, getIsMixMode, getCollapsed, getRealWidth } =
|
|
|
+ useMenuSetting();
|
|
|
|
|
|
const { prefixCls } = useDesign('layout-sideBar');
|
|
|
-
|
|
|
const { getIsMobile } = useAppInject();
|
|
|
-
|
|
|
const { getTriggerAttr, getShowTrigger } = useTrigger(getIsMobile);
|
|
|
-
|
|
|
- useDragLine(sideRef, dragBarRef);
|
|
|
-
|
|
|
const { getCollapsedWidth, onBreakpointChange } = useSiderEvent();
|
|
|
+ const getTrigger = h(LayoutTrigger);
|
|
|
|
|
|
const getMode = computed(() => {
|
|
|
return unref(getSplit) ? MenuModeEnum.INLINE : null;
|
|
|
@@ -99,30 +88,22 @@
|
|
|
};
|
|
|
});
|
|
|
|
|
|
- // 在此处使用计算量可能会导致sider异常
|
|
|
- // andv 更新后,如果trigger插槽可用,则此处代码可废弃
|
|
|
- const getTrigger = h(LayoutTrigger);
|
|
|
-
|
|
|
return {
|
|
|
prefixCls,
|
|
|
- sideRef,
|
|
|
- dragBarRef,
|
|
|
getIsMobile,
|
|
|
getHiddenDomStyle,
|
|
|
getSiderClass,
|
|
|
- getTrigger,
|
|
|
- getTriggerAttr,
|
|
|
- getCollapsedWidth,
|
|
|
getMenuFixed,
|
|
|
showClassSideBarRef,
|
|
|
getMenuWidth,
|
|
|
getCollapsed,
|
|
|
- getMenuTheme,
|
|
|
+ getCollapsedWidth,
|
|
|
+ getTrigger,
|
|
|
+ getShowTrigger,
|
|
|
+ getTriggerAttr,
|
|
|
onBreakpointChange,
|
|
|
getMode,
|
|
|
getSplitType,
|
|
|
- getShowTrigger,
|
|
|
- toggleCollapsed,
|
|
|
};
|
|
|
},
|
|
|
});
|
|
|
@@ -132,6 +113,9 @@
|
|
|
|
|
|
.ant-layout .ant-layout-sider.@{prefix-cls} {
|
|
|
z-index: @layout-sider-fixed-z-index;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-right: 1px solid #e7ebf3;
|
|
|
+ box-shadow: none;
|
|
|
|
|
|
&--fixed {
|
|
|
position: fixed;
|
|
|
@@ -145,42 +129,293 @@
|
|
|
height: calc(100% - @header-height);
|
|
|
}
|
|
|
|
|
|
- // &.ant-layout-sider-light {
|
|
|
- // // border-right: 1px solid @border-color-base;
|
|
|
- // box-shadow: 1px 0 0 0 @header-light-bottom-border-color;
|
|
|
- // }
|
|
|
+ .ant-layout-sider-children {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ height: 100%;
|
|
|
+ min-height: 0;
|
|
|
+ background: #f8fafc;
|
|
|
+ }
|
|
|
|
|
|
- &.ant-layout-sider-dark {
|
|
|
- background-color: @sider-dark-bg-color;
|
|
|
+ .sidebar-menu-wrap {
|
|
|
+ display: flex;
|
|
|
+ flex: 1 1 auto;
|
|
|
+ flex-direction: column;
|
|
|
+ min-height: 0;
|
|
|
+ }
|
|
|
|
|
|
- .ant-layout-sider-trigger {
|
|
|
- color: darken(@white, 25%);
|
|
|
- background-color: @trigger-dark-bg-color;
|
|
|
+ /* 隐藏滚动条,但保留容器滚轮滚动 */
|
|
|
+ .scrollbar__bar {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
|
|
|
- &:hover {
|
|
|
- color: @white;
|
|
|
- background-color: @trigger-dark-hover-bg-color;
|
|
|
- }
|
|
|
- }
|
|
|
+ .scrollbar__wrap,
|
|
|
+ .scrollbar__view {
|
|
|
+ scrollbar-width: none;
|
|
|
+ -ms-overflow-style: none;
|
|
|
}
|
|
|
|
|
|
- &:not(.ant-layout-sider-dark) {
|
|
|
- // box-shadow: 2px 0 8px 0 rgba(29, 35, 41, 0.05);
|
|
|
+ .scrollbar__wrap::-webkit-scrollbar,
|
|
|
+ .scrollbar__view::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ }
|
|
|
|
|
|
- .ant-layout-sider-trigger {
|
|
|
- color: @text-color-base;
|
|
|
- border-top: 1px solid @header-light-bottom-border-color;
|
|
|
- }
|
|
|
+ /* ---------------- 菜单容器 ---------------- */
|
|
|
+ .jeesite-menu.jeesite-menu-light.jeesite-menu-vertical {
|
|
|
+ padding: 14px 0 10px;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li {
|
|
|
+ position: relative;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 分组标题:跟随当前菜单结构,菜单标题调整时需同步 */
|
|
|
+ .jeesite-simple-menu > li[title='案件数据'],
|
|
|
+ .jeesite-simple-menu > li[title='通信分析'],
|
|
|
+ .jeesite-simple-menu > li[title='交易分析'],
|
|
|
+ .jeesite-simple-menu > li[title='活动轨迹分析'],
|
|
|
+ .jeesite-simple-menu > li[title='行为时空分析'] {
|
|
|
+ margin-top: 34px;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 叶子项默认 overflow:hidden 会裁掉分组标题 */
|
|
|
+ .jeesite-simple-menu > li[title='案件数据'],
|
|
|
+ .jeesite-simple-menu > li[title='行为时空分析'] {
|
|
|
+ overflow: visible;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 有子项的分组只保留分组标题,父级行不再显示 */
|
|
|
+ .jeesite-menu-submenu[title='通信分析'] > .jeesite-menu-submenu-title,
|
|
|
+ .jeesite-menu-submenu[title='交易分析'] > .jeesite-menu-submenu-title,
|
|
|
+ .jeesite-menu-submenu[title='活动轨迹分析'] > .jeesite-menu-submenu-title {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li[title='案件数据']::after,
|
|
|
+ .jeesite-simple-menu > li[title='通信分析']::after,
|
|
|
+ .jeesite-simple-menu > li[title='交易分析']::after,
|
|
|
+ .jeesite-simple-menu > li[title='活动轨迹分析']::after,
|
|
|
+ .jeesite-simple-menu > li[title='行为时空分析']::after {
|
|
|
+ position: absolute;
|
|
|
+ top: -26px;
|
|
|
+ left: 14px;
|
|
|
+ right: 14px;
|
|
|
+ height: 16px;
|
|
|
+ border-bottom: 1px solid #e7ebf3;
|
|
|
+ color: #98a2b3;
|
|
|
+ font-size: 9px;
|
|
|
+ font-weight: 500;
|
|
|
+ letter-spacing: 0.1em;
|
|
|
+ line-height: 15px;
|
|
|
+ font-variant-numeric: tabular-nums;
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li[title='案件数据']::after {
|
|
|
+ content: '01 / 总览';
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li[title='通信分析']::after {
|
|
|
+ content: '02 / 通信分析';
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li[title='交易分析']::after {
|
|
|
+ content: '03 / 交易分析';
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li[title='活动轨迹分析']::after {
|
|
|
+ content: '04 / 活动轨迹分析';
|
|
|
}
|
|
|
|
|
|
- .ant-layout-sider-zero-width-trigger {
|
|
|
- top: 40%;
|
|
|
- z-index: 10;
|
|
|
+ .jeesite-simple-menu > li[title='行为时空分析']::after {
|
|
|
+ content: '05 / 关联与工具';
|
|
|
}
|
|
|
|
|
|
- & .ant-layout-sider-trigger {
|
|
|
+ /* ---------------- 菜单项 ---------------- */
|
|
|
+ .jeesite-menu-item,
|
|
|
+ .jeesite-menu-submenu-title {
|
|
|
+ position: relative;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ min-height: 34px;
|
|
|
+ margin: 1px 0;
|
|
|
+ padding: 0 14px !important;
|
|
|
+ border-radius: 0;
|
|
|
+ background: transparent;
|
|
|
+ color: #1f2937;
|
|
|
+ font-size: 12px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 20px;
|
|
|
+ transition:
|
|
|
+ background-color 0.15s ease,
|
|
|
+ color 0.15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item > .jeesite-icon,
|
|
|
+ .jeesite-menu-submenu-title > .jeesite-icon:not(.jeesite-menu-submenu-title-icon) {
|
|
|
+ display: inline-flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 18px;
|
|
|
+ height: 18px;
|
|
|
+ flex: 0 0 18px;
|
|
|
+ margin-right: 2px;
|
|
|
+ color: #94a3b8;
|
|
|
+ font-size: 18px !important;
|
|
|
+ transition: color 0.15s ease;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item:hover,
|
|
|
+ .jeesite-menu-submenu-title:hover {
|
|
|
+ background: #f1f5f9;
|
|
|
+ color: #111827;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item:hover > .jeesite-icon,
|
|
|
+ .jeesite-menu-submenu-title:hover > .jeesite-icon:not(.jeesite-menu-submenu-title-icon) {
|
|
|
+ color: #475569;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-submenu-title > .jeesite-menu-submenu-title-icon {
|
|
|
+ right: 12px;
|
|
|
+ width: 14px;
|
|
|
+ color: #98a2b3;
|
|
|
+ transform: translateY(-50%) rotate(0deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-opened > .jeesite-menu-submenu-title > .jeesite-menu-submenu-title-icon {
|
|
|
+ transform: translateY(-50%) rotate(180deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-submenu-title.jeesite-menu-submenu-active {
|
|
|
+ background: transparent;
|
|
|
+ color: #2448c9;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-submenu-title.jeesite-menu-submenu-active > .jeesite-icon:not(.jeesite-menu-submenu-title-icon) {
|
|
|
+ color: #2a50ec;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-submenu-title.jeesite-menu-submenu-active > .jeesite-menu-submenu-title-icon {
|
|
|
+ color: #2a50ec;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 当前页:细线标记,不使用圆角胶囊 */
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-active,
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-selected {
|
|
|
+ background: #dbe5ff !important;
|
|
|
+ border-radius: 0 !important;
|
|
|
+ box-shadow: none;
|
|
|
+ color: #2448c9 !important;
|
|
|
+ font-weight: 600;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-active::before,
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-selected::before {
|
|
|
+ position: absolute;
|
|
|
+ top: 4px;
|
|
|
+ bottom: 4px;
|
|
|
+ left: 0;
|
|
|
+ width: 2px;
|
|
|
+ border-radius: 0 2px 2px 0;
|
|
|
+ background: #2a50ec;
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-active > .jeesite-icon,
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-selected > .jeesite-icon {
|
|
|
+ color: #2a50ec;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- 二级菜单 ---------------- */
|
|
|
+ .jeesite-menu-submenu > .jeesite-menu {
|
|
|
+ width: auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ border-left: 0;
|
|
|
+ background: transparent;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu__children {
|
|
|
+ min-height: 32px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- 底部折叠条 ---------------- */
|
|
|
+ .ant-layout-sider-trigger {
|
|
|
height: 36px;
|
|
|
line-height: 36px;
|
|
|
+ background: #f8fafc;
|
|
|
+ border-top: 1px solid #e7ebf3;
|
|
|
+ color: #98a2b3;
|
|
|
+ transition:
|
|
|
+ background-color 0.15s ease,
|
|
|
+ color 0.15s ease;
|
|
|
+
|
|
|
+ &:hover {
|
|
|
+ background: #f1f5f9;
|
|
|
+ color: #2a50ec;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------- 折叠态:图标栏 ---------------- */
|
|
|
+ &.ant-layout-sider-collapsed {
|
|
|
+ .jeesite-menu.jeesite-menu-light.jeesite-menu-vertical {
|
|
|
+ padding: 6px 4px 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li {
|
|
|
+ margin-top: 0 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu > li::after {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item,
|
|
|
+ .jeesite-menu-submenu-title {
|
|
|
+ min-height: 40px;
|
|
|
+ justify-content: center;
|
|
|
+ padding: 7px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item > .jeesite-icon,
|
|
|
+ .jeesite-menu-submenu-title > .jeesite-icon:not(.jeesite-menu-submenu-title-icon) {
|
|
|
+ width: 22px !important;
|
|
|
+ height: 22px !important;
|
|
|
+ flex: 0 0 22px !important;
|
|
|
+ margin-right: 0;
|
|
|
+ font-size: 22px !important;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-simple-menu-sub-title,
|
|
|
+ .jeesite-menu-submenu-title-icon {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-active,
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-selected {
|
|
|
+ background: #dbe5ff !important;
|
|
|
+ border-radius: 8px !important;
|
|
|
+ box-shadow: inset 0 0 0 1px #bfcdfb;
|
|
|
+ color: #2448c9 !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-active::before,
|
|
|
+ .jeesite-menu-item.jeesite-menu-item-selected::before {
|
|
|
+ display: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 折叠后只保留实际页面项,不显示通信/交易/活动轨迹父级图标 */
|
|
|
+ .jeesite-simple-menu .jeesite-menu-submenu > .jeesite-menu-submenu-title {
|
|
|
+ display: none !important;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
</style>
|