| 提交 | 用户 | age | ||
| 2f6253 | 1 | import { computed, defineComponent, nextTick, onMounted, ref, unref } from 'vue'; |
| 陈 | 2 | |
| 3 | import { Layout } from 'ant-design-vue'; | |
| 4 | import SideBarTrigger from './SideBarTrigger'; | |
| 5 | import { menuStore } from '/@/store/modules/menu'; | |
| 6 | ||
| 508109 | 7 | // import darkMiniIMg from '/@/assets/images/sidebar/dark-mini.png'; |
| V | 8 | // import lightMiniImg from '/@/assets/images/sidebar/light-mini.png'; |
| 2f6253 | 9 | import darkImg from '/@/assets/images/sidebar/dark.png'; |
| 陈 | 10 | import lightImg from '/@/assets/images/sidebar/light.png'; |
| 11 | import { appStore } from '/@/store/modules/app'; | |
| 12 | import { MenuModeEnum, MenuSplitTyeEnum, MenuThemeEnum } from '/@/enums/menuEnum'; | |
| 13 | import { useDebounce } from '/@/hooks/core/useDebounce'; | |
| 14 | import LayoutMenu from './LayoutMenu'; | |
| 15 | export default defineComponent({ | |
| 16 | name: 'DefaultLayoutSideBar', | |
| 17 | setup() { | |
| 18 | const initRef = ref(false); | |
| 19 | const brokenRef = ref(false); | |
| 20 | const collapseRef = ref(true); | |
| 21 | const dragBarRef = ref<Nullable<HTMLDivElement>>(null); | |
| 22 | const sideRef = ref<any>(null); | |
| 23 | ||
| 24 | const getProjectConfigRef = computed(() => { | |
| 25 | return appStore.getProjectConfig; | |
| 26 | }); | |
| 27 | ||
| 28 | // 根据展开状态设置背景图片 | |
| 29 | const getStyle = computed((): any => { | |
| 508109 | 30 | // const collapse = unref(collapseRef); |
| 2f6253 | 31 | |
| 陈 | 32 | const theme = unref(getProjectConfigRef).menuSetting.theme; |
| 33 | let bg = ''; | |
| 34 | if (theme === MenuThemeEnum.DARK) { | |
| 508109 | 35 | // bg = collapse ? darkMiniIMg : darkImg; |
| V | 36 | bg = darkImg; |
| 2f6253 | 37 | } |
| 陈 | 38 | if (theme === MenuThemeEnum.LIGHT) { |
| 508109 | 39 | bg = lightImg; |
| V | 40 | // bg = collapse ? lightMiniImg : lightImg; |
| 2f6253 | 41 | } |
| 陈 | 42 | return { |
| 43 | 'background-image': `url(${bg})`, | |
| 44 | }; | |
| 45 | }); | |
| 46 | ||
| 47 | function onCollapseChange(val: boolean) { | |
| 48 | if (initRef.value) { | |
| 49 | collapseRef.value = val; | |
| 50 | menuStore.commitCollapsedState(val); | |
| 51 | } else { | |
| 52 | const collapsed = appStore.getProjectConfig.menuSetting.collapsed; | |
| 53 | !collapsed && menuStore.commitCollapsedState(val); | |
| 54 | } | |
| 55 | initRef.value = true; | |
| 56 | } | |
| 57 | ||
| 58 | // 菜单区域拖拽 - 鼠标移动 | |
| 59 | function handleMouseMove(ele: any, wrap: any, clientX: number) { | |
| 60 | document.onmousemove = function (innerE) { | |
| 61 | let iT = ele.left + ((innerE || event).clientX - clientX); | |
| 62 | innerE = innerE || window.event; | |
| 63 | // let tarnameb = innerE.target || innerE.srcElement; | |
| 64 | const maxT = 600; | |
| 65 | const minT = 80; | |
| 66 | iT < 0 && (iT = 0); | |
| 67 | iT > maxT && (iT = maxT); | |
| 68 | iT < minT && (iT = minT); | |
| 69 | ele.style.left = wrap.style.width = iT + 'px'; | |
| 70 | return false; | |
| 71 | }; | |
| 72 | } | |
| 73 | ||
| 74 | // 菜单区域拖拽 - 鼠标松开 | |
| 75 | function removeMouseup(ele: any) { | |
| 76 | const wrap = unref(sideRef).$el; | |
| 77 | document.onmouseup = function () { | |
| 78 | document.onmousemove = null; | |
| 79 | document.onmouseup = null; | |
| 80 | const width = parseInt(wrap.style.width); | |
| 81 | menuStore.commitDragStartState(false); | |
| 82 | if (!menuStore.getCollapsedState) { | |
| 83 | if (width > 100) { | |
| 84 | setMenuWidth(width); | |
| 85 | } else { | |
| 86 | menuStore.commitCollapsedState(true); | |
| 87 | } | |
| 88 | } else { | |
| 89 | if (width > 80) { | |
| 90 | setMenuWidth(width); | |
| 91 | menuStore.commitCollapsedState(false); | |
| 92 | } | |
| 93 | } | |
| 94 | ||
| 95 | ele.releaseCapture && ele.releaseCapture(); | |
| 96 | }; | |
| 97 | } | |
| 98 | ||
| 99 | function setMenuWidth(width: number) { | |
| 100 | appStore.commitProjectConfigState({ | |
| 101 | menuSetting: { | |
| 102 | menuWidth: width, | |
| 103 | }, | |
| 104 | }); | |
| 105 | } | |
| 106 | ||
| 107 | function changeWrapWidth() { | |
| 108 | const ele = unref(dragBarRef) as any; | |
| 109 | const side = unref(sideRef); | |
| 110 | ||
| 111 | const wrap = (side || {}).$el; | |
| 112 | // const eleWidth = 6; | |
| 113 | ele && | |
| 114 | (ele.onmousedown = (e: any) => { | |
| 115 | menuStore.commitDragStartState(true); | |
| 116 | wrap.style.transition = 'unset'; | |
| 117 | const clientX = (e || event).clientX; | |
| 118 | ele.left = ele.offsetLeft; | |
| 119 | handleMouseMove(ele, wrap, clientX); | |
| 120 | removeMouseup(ele); | |
| 121 | ele.setCapture && ele.setCapture(); | |
| 122 | return false; | |
| 123 | }); | |
| 124 | } | |
| 125 | function handleBreakpoint(broken: boolean) { | |
| 126 | brokenRef.value = broken; | |
| 127 | } | |
| 128 | ||
| 129 | onMounted(() => { | |
| 130 | nextTick(() => { | |
| 131 | const [exec] = useDebounce(changeWrapWidth, 20); | |
| 132 | exec(); | |
| 133 | }); | |
| 134 | }); | |
| 135 | ||
| 136 | const getDragBarStyle = computed(() => { | |
| 137 | if (menuStore.getCollapsedState) { | |
| 138 | return { left: '80px' }; | |
| 139 | } | |
| 140 | return {}; | |
| 141 | }); | |
| 142 | ||
| 143 | const getCollapsedWidth = computed(() => { | |
| 144 | return unref(brokenRef) ? 0 : 80; | |
| 145 | }); | |
| 146 | ||
| 147 | function renderDragLine() { | |
| 148 | const { menuSetting: { hasDrag = true } = {} } = unref(getProjectConfigRef); | |
| 149 | return ( | |
| 150 | <div | |
| 151 | class={[`layout-sidebar__dargbar`, !hasDrag ? 'hide' : '']} | |
| 152 | style={unref(getDragBarStyle)} | |
| 153 | ref={dragBarRef} | |
| 154 | /> | |
| 155 | ); | |
| 156 | } | |
| 157 | ||
| 158 | return () => { | |
| 159 | const { | |
| 160 | menuSetting: { theme, split: splitMenu }, | |
| 161 | } = unref(getProjectConfigRef); | |
| 162 | const { getCollapsedState, getMenuWidthState } = menuStore; | |
| 163 | return ( | |
| 164 | <Layout.Sider | |
| 165 | onCollapse={onCollapseChange} | |
| 166 | breakpoint="md" | |
| 167 | width={getMenuWidthState} | |
| 168 | collapsed={getCollapsedState} | |
| 169 | collapsible | |
| 170 | collapsedWidth={unref(getCollapsedWidth)} | |
| 171 | theme={theme} | |
| 172 | class="layout-sidebar" | |
| 173 | ref={sideRef} | |
| 174 | onBreakpoint={handleBreakpoint} | |
| 175 | style={unref(getStyle)} | |
| 176 | > | |
| 177 | {{ | |
| 178 | trigger: () => <SideBarTrigger />, | |
| 179 | default: () => ( | |
| 180 | <> | |
| 181 | <LayoutMenu | |
| 182 | theme={theme} | |
| 183 | menuMode={splitMenu ? MenuModeEnum.INLINE : null} | |
| 184 | splitType={splitMenu ? MenuSplitTyeEnum.LEFT : MenuSplitTyeEnum.NONE} | |
| 185 | /> | |
| 186 | {renderDragLine()} | |
| 187 | </> | |
| 188 | ), | |
| 189 | }} | |
| 190 | </Layout.Sider> | |
| 191 | ); | |
| 192 | }; | |
| 193 | }, | |
| 194 | }); | |
