feature: 添加折叠菜单

src/App.vue

@@ -3,12 +3,22 @@
 </template>
 
 <script setup lang="ts">
+import { useCurrentInstance } from '@/hooks/useCurrentInstance'
+import { useStore } from '@/store'
 // import HelloWorld from './components/HelloWorld.vue'
 
 // const admin = 'asdasdasdas'
 
 // This starter template is using Vue 3 experimental <script setup> SFCs
 // Check out https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md
+
+const store = useStore()
+const mutation = useCurrentInstance().globalProperties.$mutation
+const locstorCollapse = localStorage.getItem('appCollapseMenu')
+let locMenu: boolean
+if (locstorCollapse) locMenu = JSON.parse(locstorCollapse)
+else locMenu = false
+store.commit(mutation.SET_COLLAPSEMENU, locMenu)
 </script>
 
 <style lang="scss"></style>

src/hooks/appWindow.ts

@@ -0,0 +1,8 @@
+import { useStore } from '@/store'
+import { computed } from 'vue'
+
+export const getAppCollapseMenu = () => {
+	const store = useStore()
+	const isCollapseMenu = computed(() => store.getters.collapseMenu)
+	return isCollapseMenu
+}

src/hooks/useCurrentInstance.ts

@@ -0,0 +1,16 @@
+import { ComponentInternalInstance, getCurrentInstance } from 'vue'
+
+export function useCurrentInstance() {
+	const { appContext } = getCurrentInstance() as ComponentInternalInstance
+	const globalProperties = appContext.config.globalProperties
+	return {
+		globalProperties,
+	}
+}
+
+export function getProxy() {
+	const { proxy } = getCurrentInstance() as ComponentInternalInstance
+	return {
+		proxy,
+	}
+}

src/layouts/components/AppMain/index.vue

@@ -30,6 +30,7 @@
 	background-color: #{$appMainBgColor};
 
 	.page-container {
+		height: calc(100vh - #{$navBarHeight+$BreadcrumbHeight+40px});
 		margin: 20px;
 		overflow: hidden;
 		background-color: #fff;

src/layouts/components/Breadcrumb/Breadcrumb.vue

@@ -1,35 +1,44 @@
 <template>
-	<el-breadcrumb class="app-breadcrumb" separator="/">
-		<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
-			<span
-				v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
-				class="no-redirect"
-				>{{ item.meta.title }}</span
-			>
-			<a v-else class="redirect" @click.prevent="handleLink(item)">{{
-				item.meta.title
-			}}</a>
-		</el-breadcrumb-item>
-	</el-breadcrumb>
+	<div class="breadcrumb">
+		<i
+			class="breadcrumb-icon"
+			:class="[isCollapseMenu ? 'el-icon-s-unfold' : 'el-icon-s-fold']"
+			@click="handerShowElmenu"
+		></i>
+		<el-breadcrumb class="app-breadcrumb" separator="/">
+			<el-breadcrumb-item v-for="(item, index) in levelList" :key="item.path">
+				<span
+					v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
+					class="no-redirect"
+					>{{ item.meta.title }}</span
+				>
+				<a v-else class="redirect" @click.prevent="handleLink(item)">
+					{{ item.meta.title }}
+				</a>
+			</el-breadcrumb-item>
+		</el-breadcrumb>
+	</div>
 </template>
 
 <script setup lang="ts">
 import type { RouteLocationMatched } from 'vue-router'
 import { ref, watch } from 'vue'
+import { useCurrentInstance } from '@/hooks/useCurrentInstance'
+import { useStore } from '@/store/index'
+import { getAppCollapseMenu } from '@/hooks/appWindow'
 import { useRoute, useRouter } from 'vue-router'
 
 const levelList = ref<Array<RouteLocationMatched>>([])
+// 获取路由配置
 const router = useRouter()
 // 当前路由
 const route = useRoute()
-
 // 解析路由匹配的数组
 const getBreadcrumb = () => {
 	// 过滤留下只有meta和title
 	const matched: RouteLocationMatched[] = route.matched.filter(
 		(item) => item.meta && item.meta.title
 	)
-
 	// 拼出最终需要展示的跳转数据
 	levelList.value = matched.filter(
 		(item) => item.meta && item.meta.title && item.meta.breadcrumb !== false
@@ -49,26 +58,46 @@ const handleLink = (item: any) => {
 	}
 	router.push(pathCompile(path))
 }
-
 // 首次调用
 getBreadcrumb()
 // 监控route的变化，避免组件复用信息同步问题
 watch(route, getBreadcrumb)
+
+// 注入store
+const store = useStore()
+// 当前是否折叠导航栏
+const isCollapseMenu = getAppCollapseMenu()
+// 获取Mutation 事件常量
+const mutation = useCurrentInstance().globalProperties.$mutation
+// 折叠菜单事件
+const handerShowElmenu = () => {
+	store.commit(mutation.SET_COLLAPSEMENU, !store.state.app.collapseMenu)
+}
 </script>
 
 <style lang="scss" scoped>
-.app-breadcrumb.el-breadcrumb {
-	// display: inline-block;
-	// font-size: 14px;
-	line-height: #{$BreadcrumbHeight};
-	// margin-left: 8px;
-	.redirect {
-		color: $BreadcrumbText;
+.breadcrumb {
+	display: flex;
+	align-items: center;
+
+	.breadcrumb-icon {
+		margin-right: 20px;
+		font-size: 20px;
 	}
 
-	.no-redirect {
-		color: #97a8be;
-		cursor: text;
+	.app-breadcrumb.el-breadcrumb {
+		// display: inline-block;
+		// font-size: 14px;
+		line-height: #{$BreadcrumbHeight};
+		// margin-left: 8px;
+		.redirect {
+			color: $BreadcrumbText;
+		}
+
+		.no-redirect {
+			color: #97a8be;
+			cursor: text;
+		}
 	}
 }
 </style>

src/layouts/components/Sidebar/index.vue

@@ -1,26 +1,31 @@
 <template>
-	<el-scrollbar wrap-class="scrollbar-wrapper">
-		<el-menu
-			:default-active="activeMenyu"
-			:unique-opened="false"
-			mode="vertical"
-		>
-			<sidebar-item
-				v-for="route in safeManagerRoutes"
-				:key="route.path"
-				:item="route"
-				:is-nest="false"
-				:base-path="route.path"
-			/>
-		</el-menu>
-	</el-scrollbar>
+	<div>
+		<el-scrollbar wrap-class="scrollbar-wrapper">
+			<el-menu
+				:default-active="activeMenyu"
+				:unique-opened="false"
+				:collapse="isCollapseMenu"
+				mode="vertical"
+			>
+				<sidebar-item
+					v-for="route in safeManagerRoutes"
+					:key="route.path"
+					:item="route"
+					:is-nest="false"
+					:base-path="route.path"
+				/>
+			</el-menu>
+			<!-- <i class="breadcrumb-icon" :class="'el-icon-s-unfold'"></i> -->
+		</el-scrollbar>
+	</div>
 </template>
 
 <script setup lang="ts">
 import { computed } from 'vue'
 import { useRoute } from 'vue-router'
 import SidebarItem from './SidebarItem.vue'
 import { safeManagerRoutes } from '@/router/otherRoute'
+import { getAppCollapseMenu } from '@/hooks/appWindow'
 
 const activeMenyu = computed(() => {
 	const route = useRoute()
@@ -30,10 +35,25 @@ const activeMenyu = computed(() => {
 	}
 	return path
 })
+
+const isCollapseMenu = getAppCollapseMenu()
+
+// const isCollapse = ref(false)
 </script>
 
 <style lang="scss" scoped>
 .tac {
 	height: 100%;
 }
+
+.breadcrumb-icon {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	width: 56px;
+	height: 56px;
+	font-size: 20px;
+	line-height: 56px;
+	text-align: center;
+}
 </style>

src/layouts/index.vue

@@ -1,5 +1,5 @@
 <template>
-	<div class="app-wrapper">
+	<div class="app-wrapper" :class="{ hideSidebar: isCollapseMenu }">
 		<!-- 顶部导航栏 -->
 		<NavBart />
 		<!-- 侧边导航栏 -->
@@ -20,6 +20,9 @@ import AppMain from './components/AppMain/index.vue'
 import NavBart from './components/Navbart/index.vue'
 import Sidebar from './components/Sidebar/index.vue'
 import Breadcrumb from './components/Breadcrumb/Breadcrumb.vue'
+import { getAppCollapseMenu } from '@/hooks/appWindow'
+
+const isCollapseMenu = getAppCollapseMenu()
 </script>
 
 <style lang="scss" scoped></style>

src/main.ts

@@ -6,6 +6,7 @@ import 'es6-promise/auto'
 import 'virtual:svg-icons-register'
 
 import { store, key } from './store'
+import mutation from './store/mutation'
 import Router from './router'
 import I18n from './locales'
 import App from './App.vue'
@@ -21,6 +22,9 @@ app.config.globalProperties.foo = 'bar'
  * proxy.foo
  */
 
+console.log(mutation)
+app.config.globalProperties.$mutation = mutation
+
 app
 	.use(store, key)
 	.use(Router)

src/store/module/app/index.ts

@@ -0,0 +1,34 @@
+import { Module } from 'vuex'
+
+const actionTypes = {}
+
+const mutationTypes = {
+	SET_COLLAPSEMENU: 'SET_COLLAPSEMENU',
+}
+
+interface StoreUser {
+	collapseMenu: boolean
+}
+
+const store: Module<StoreUser, unknown> = {
+	namespaced: false, // 是否加上所属的模块名
+	state() {
+		return {
+			collapseMenu: false,
+		}
+	},
+	mutations: {
+		[mutationTypes.SET_COLLAPSEMENU](state: StoreUser, payload: boolean) {
+			state.collapseMenu = payload
+			localStorage.setItem('appCollapseMenu', JSON.stringify(payload))
+		},
+	},
+	actions: {},
+	getters: {
+		collapseMenu: (state) => state.collapseMenu,
+	},
+}
+
+export { actionTypes, mutationTypes }
+
+export default store

src/styles/sidebar.scss

@@ -165,6 +165,20 @@
 			}
 		}
 
+		.el-menu-item {
+			.svg-icon {
+				margin-left: 20px;
+			}
+
+			.sub-el-icon {
+				margin-left: 19px;
+			}
+
+			.el-sub-menu__icon-arrow {
+				display: none;
+			}
+		}
+
 		.el-menu--collapse {
 			.el-sub-menu {
 				& > .el-sub-menu__title {
@@ -177,6 +191,16 @@
 					}
 				}
 			}
+
+			.el-menu-item {
+				& > span {
+					display: inline-block;
+					width: 0;
+					height: 0;
+					overflow: hidden;
+					visibility: hidden;
+				}
+			}
 		}
 	}
 

src/views/useradmin/userlist/index.vue

@@ -14,22 +14,21 @@
 </template>
 
 <script setup>
-import { useStore } from 'vuex'
-import { key } from '@/store'
-import mutation from '@/store/mutation'
 import SvgIcon from '@/components/SvgIcon/index.vue'
+import { getCurrentInstance } from 'vue'
 
 import { useI18n } from 'vue-i18n'
 import { ref } from '@vue/reactivity'
 const { t } = useI18n()
 
 const value1 = ref()
 
-// console.log(t())
+const instance = getCurrentInstance()
+
+console.log(instance.appContext.config.globalProperties.foo)
 
-const store = useStore(key)
-// console.log(store, mutation)
-store.commit(mutation.SET_USER, '进来了是吗？？？？')
+// console.log(t())
+// store.commit(mutation.SET_USER, '进来了是吗？？？？')
 // console.log(useStore())
 </script>