From cc495d73c3bc93b7d88733bdbd91aaa6b43b1d95 Mon Sep 17 00:00:00 2001 From: april <1317795103@qq.com> Date: Wed, 23 Aug 2023 12:23:03 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix:=20=E6=B7=B7=E5=90=88=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=AE=8C=E5=96=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: e75ca92650f09791eae18325bf2da11f9a216fab --- src/components/Hamburger/index.vue | 2 +- src/layout/components/Settings/index.vue | 43 +++++++++++++++++++++++- src/layout/components/Sidebar/index.vue | 1 + src/layout/index.vue | 41 +++++++++++++++++++++- src/styles/sidebar.scss | 14 ++++---- src/views/demo/internal-doc.vue | 21 ++++++++++++ 6 files changed, 112 insertions(+), 10 deletions(-) create mode 100644 src/views/demo/internal-doc.vue diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index d98a4aa7..5ae603a6 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -8,7 +8,6 @@ class="hamburger" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" - style="color: #fff !important" > import { useSettingsStore } from "@/store/modules/settings"; - +import { usePermissionStore } from "@/store/modules/permission"; +import { useAppStore } from "@/store/modules/app"; import IconEpSunny from "~icons/ep/sunny"; import IconEpMoon from "~icons/ep/moon"; +import { useRoute } from "vue-router"; /** * 暗黑模式 */ const settingsStore = useSettingsStore(); +const permissionStore = usePermissionStore(); +const appStore = useAppStore(); const isDark = useDark(); const toggleDark = () => useToggle(isDark); +function findOutermostParent(tree: any[], findName: string) { + let parentMap: any = {}; + + function buildParentMap(node: any, parent: any) { + parentMap[node.name] = parent; + + if (node.children) { + for (let i = 0; i < node.children.length; i++) { + buildParentMap(node.children[i], node); + } + } + } + + for (let i = 0; i < tree.length; i++) { + buildParentMap(tree[i], null); + } + + let currentNode = parentMap[findName]; + while (currentNode) { + if (!parentMap[currentNode.name]) { + return currentNode; + } + currentNode = parentMap[currentNode.name]; + } + + return null; +} +const againActiveTop = (newVal: string) => { + const parent = findOutermostParent(permissionStore.routes, newVal); + if (appStore.activeTopMenu !== parent.path) { + appStore.changeTopActive(parent.path); + } +}; +const route = useRoute(); /** * 切换布局 */ function changeLayout(layout: string) { settingsStore.changeSetting({ key: "layout", value: layout }); window.document.body.setAttribute("layout", settingsStore.layout); + if (layout === "mix") { + route.name && againActiveTop(route.name as string); + } } // 主题颜色 diff --git a/src/layout/components/Sidebar/index.vue b/src/layout/components/Sidebar/index.vue index fc499bcf..08206d0a 100644 --- a/src/layout/components/Sidebar/index.vue +++ b/src/layout/components/Sidebar/index.vue @@ -63,6 +63,7 @@ watch( .isMix { .menu-wrap { + z-index: 99; width: 100% !important; height: 50px; background-color: $menuBg; diff --git a/src/layout/index.vue b/src/layout/index.vue index fdaab020..a2e671ee 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -70,6 +70,10 @@ watchEffect(() => { function handleOutsideClick() { appStore.closeSideBar(false); } + +function toggleSideBar() { + appStore.toggleSidebar(true); +} @@ -175,8 +187,35 @@ function handleOutsideClick() { .mix-wrap { display: flex; + height: 100%; padding-top: 50px; + .left-wrap { + position: relative; + height: 100%; + + .el-menu { + height: 100%; + } + + .menu-action { + position: absolute; + bottom: 0; + width: 100%; + height: 50px; + line-height: 50px; + box-shadow: 0 0 6px -2px var(--el-color-primary); + + div:hover { + background-color: var(--menuBg); + } + + :deep(svg) { + color: #409eff !important; + } + } + } + .main-container { flex: 1; min-width: 0; diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 402d3e42..cebfe761 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -90,6 +90,13 @@ .svg-icon { margin-right: 0; } + + .header { + .logo-wrap { + width: 63px !important; + transition: transform 0.28s; + } + } } .main-container { @@ -144,13 +151,6 @@ .sidebar-container { width: $sideBarWidth !important; transition: transform 0.28s; - - .header { - .logo-wrap { - width: 63px !important; - transition: transform 0.28s; - } - } } &.hideSidebar:not(.isMix) { diff --git a/src/views/demo/internal-doc.vue b/src/views/demo/internal-doc.vue new file mode 100644 index 00000000..532c16e5 --- /dev/null +++ b/src/views/demo/internal-doc.vue @@ -0,0 +1,21 @@ + + + From 9d920e093fdcb86f57ad2450bf2760a96978ded1 Mon Sep 17 00:00:00 2001 From: april <1317795103@qq.com> Date: Wed, 23 Aug 2023 15:42:29 +0800 Subject: [PATCH 2/2] =?UTF-8?q?fix:=20=E9=A1=B6=E9=83=A8=E6=A8=A1=E5=BC=8F?= =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E4=BC=98=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Former-commit-id: 7558d62832766d00200e8e11573c1f001cfeb570 --- src/layout/index.vue | 6 ++++++ src/styles/sidebar.scss | 26 +------------------------- 2 files changed, 7 insertions(+), 25 deletions(-) diff --git a/src/layout/index.vue b/src/layout/index.vue index a2e671ee..af93cbcb 100644 --- a/src/layout/index.vue +++ b/src/layout/index.vue @@ -178,6 +178,12 @@ function toggleSideBar() { --el-menu-item-height: 50px; } +.mobile.isTop { + :deep(.logo-wrap) { + width: 63px; + } +} + .isMix { :deep(.main-container) { display: inline-block; diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index cebfe761..6b1e05dd 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -153,37 +153,13 @@ transition: transform 0.28s; } - &.hideSidebar:not(.isMix) { + &.hideSidebar:not(.isMix, .isTop) { .sidebar-container { pointer-events: none; transition-duration: 0.3s; transform: translate3d(-$sideBarWidth, 0, 0); } } - - &.hideSidebar { - .isMix { - :deep(.sidebar-container) { - .header { - .logo-wrap { - width: 64px; - } - } - } - } - } - - &.openSidebar { - .isMix { - :deep(.sidebar-container) { - .header { - .logo-wrap { - width: 210px; - } - } - } - } - } } .withoutAnimation {