fixbug: 添加水平菜单

src/App.vue

@@ -7,13 +7,9 @@
 <script setup lang="ts">
 import { ElConfigProvider } from 'element-plus'
 import { deffElementLocale } from '@/hooks/useI18n'
-import { useCurrentInstance } from '@/hooks/useCurrentInstance'
-import { useStore } from '@/store'
 
 const { tolocale } = deffElementLocale()
 
-console.log(tolocale.value)
-
 // import { request } from './utils/axios'
 // import HelloWorld from './components/HelloWorld.vue'
 
@@ -22,13 +18,7 @@ console.log(tolocale.value)
 // 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()
-const locstorCollapse = localStorage.getItem('appCollapseMenu')
-let locMenu: boolean
-if (locstorCollapse) locMenu = JSON.parse(locstorCollapse)
-else locMenu = false
-store.commit($mutation.SET_COLLAPSEMENU, locMenu)
+// store.commit($mutation.SET_COLLAPSEMENU, locMenu)
 
 // const req = async () => {
 // 	const res = await request.post<void>({ url: '/mock_api/getUserInfo' })

src/components/SvgIcon/index.vue

@@ -38,6 +38,9 @@ const symbolId = computed(() => `#${props.prefix}-${props.name}`)
 
 <style lang="scss" scoped>
 .el-icon {
+	width: 1em;
+	height: 1em;
+	margin: 0;
 	// 取父级的宽高
 	font-size: 1em;
 	color: currentColor;

src/hooks/appWindow.ts

@@ -3,6 +3,8 @@ import { computed } from 'vue'
 
 export const getAppCollapseMenu = () => {
 	const store = useStore()
-	const isCollapseMenu = computed(() => store.getters.collapseMenu)
-	return isCollapseMenu
+	const isCollapseMenu = computed<boolean>(() => store.getters.collapseMenu)
+	const sidebarMode = computed<string>(() => store.getters.sidebarMode)
+	console.log(sidebarMode)
+	return { isCollapseMenu, sidebarMode }
 }

src/layouts/components/Breadcrumb/Breadcrumb.vue

@@ -77,7 +77,7 @@ watch(route, getBreadcrumb)
 // 注入store
 const store = useStore()
 // 当前是否折叠导航栏
-const isCollapseMenu = getAppCollapseMenu()
+const { isCollapseMenu } = getAppCollapseMenu()
 // 获取Mutation 事件常量
 const { $mutation } = useCurrentInstance()
 // 折叠菜单事件
@@ -97,8 +97,6 @@ const handerShowElmenu = () => {
 	}
 
 	.breadcrumb-fold {
-		width: 20px;
-		height: 20px;
 		margin-right: 20px;
 	}
 

src/layouts/components/Navbart/index.vue

@@ -1,7 +1,14 @@
 <template>
 	<div class="navbar">
 		<div class="navbar-left">
-			<span>这里本来是logo但是我还没想好放什么好看的logo</span>
+			<span>这是一个logo</span>
+		</div>
+		<div class="navbar-center">
+			<Sidebar
+				v-show="sidebarMode === 'horizontal'"
+				class="sidebar-horizontal"
+				mode="horizontal"
+			/>
 		</div>
 		<div class="navbar-right">
 			<el-dropdown class="popover-content" trigger="click" @command="tolochos">
@@ -18,24 +25,9 @@
 			<SvgIcon class="icon" name="iEL-setting" @click="drawer = true"></SvgIcon>
 		</div>
 		<el-drawer v-model="drawer" title="I am the title">
-			<span>Hi, there!</span>
+			<span @click="handerShowElmenu">Hi, there!</span>
 		</el-drawer>
-		<!-- <el-popover
-			placement="bottom"
-			:width="200"
-			trigger="click"
-			content="this is content, this is content, this is content"
-		>
-			<template #reference>
-				<SvgIcon class="icon" name="locales" color="#000000"></SvgIcon>
-			</template>
-			<div class="popover-content">
-				<el-button class="button" @click="tolochos('zh-ch')"
-					>中文简体</el-button
-				>
-				<el-button class="button" @click="tolochos('en')">English</el-button>
-			</div>
-		</el-popover>-->
+
 		<!-- <el-select v-model="value" placeholder="请选择" @change="toggleTheme">
 			<el-option
 				v-for="item in options"
@@ -53,9 +45,14 @@
 
 <script setup lang="ts">
 // import { ref } from 'vue'
+import Sidebar from '../../components/Sidebar/index.vue'
+
 import { useI18n } from '@/hooks/useI18n'
 import SvgIcon from '@/components/SvgIcon/index.vue'
 import { ref } from '@vue/reactivity'
+import { getAppCollapseMenu } from '@/hooks/appWindow'
+import { useStore } from '@/store'
+import { useCurrentInstance } from '@/hooks/useCurrentInstance'
 
 const i18n = useI18n()
 const tolochos = (key: string) => {
@@ -64,6 +61,20 @@ const tolochos = (key: string) => {
 
 const drawer = ref(false)
 
+const { sidebarMode } = getAppCollapseMenu()
+
+// 注入store
+const store = useStore()
+// 获取Mutation 事件常量
+const { $mutation } = useCurrentInstance()
+// 折叠菜单事件
+const handerShowElmenu = () => {
+	let vale = ''
+	if (sidebarMode.value === 'vertical') vale = 'horizontal'
+	else vale = 'vertical'
+
+	store.commit($mutation.SET_SIDEBARMODE, vale)
+}
 // const options = ref([
 // 	{ name: '123', value: 'variables-theme-day' },
 // 	{ name: '456', value: 'variables-theme-dark' },
@@ -92,13 +103,25 @@ const drawer = ref(false)
 	border-bottom: 1px solid $navBarBorderBottomColor;
 	box-shadow: 1px 0 20px rgb(0 0 0 / 8%);
 
+	.navbar-left {
+		// flex: 1;
+		width: 200px;
+		height: 100%;
+	}
+
+	.navbar-center {
+		width: 100%;
+		height: 100%;
+	}
+
 	.navbar-right {
 		display: flex;
+		flex: 1;
 		align-items: center;
 
 		.icon {
 			margin-left: 12px;
-			font-size: 22px;
+			font-size: 18px;
 		}
 	}
 }

src/layouts/components/Sidebar/index.vue

@@ -4,8 +4,8 @@
 			<el-menu
 				:default-active="activeMenyu"
 				:unique-opened="false"
-				:collapse="isCollapseMenu"
-				mode="vertical"
+				:collapse="sidebarMode === 'horizontal' ? false : isCollapseMenu"
+				:mode="mode"
 			>
 				<sidebar-item
 					v-for="route in safeManagerRoutes"
@@ -27,6 +27,15 @@ import SidebarItem from './SidebarItem.vue'
 import { safeManagerRoutes } from '@/router/otherRoute'
 import { getAppCollapseMenu } from '@/hooks/appWindow'
 
+const props = defineProps({
+	mode: {
+		type: String,
+		default: 'vertical',
+	},
+})
+
+console.log(props)
+
 const activeMenyu = computed(() => {
 	const route = useRoute()
 	const { meta, path } = route
@@ -36,7 +45,7 @@ const activeMenyu = computed(() => {
 	return path
 })
 
-const isCollapseMenu = getAppCollapseMenu()
+const { isCollapseMenu, sidebarMode } = getAppCollapseMenu()
 
 // const isCollapse = ref(false)
 </script>

src/layouts/index.vue

@@ -1,9 +1,14 @@
 <template>
-	<div class="app-wrapper" :class="{ hideSidebar: isCollapseMenu }">
+	<div class="app-wrapper">
 		<!-- 顶部导航栏 -->
 		<NavBart />
 		<!-- 侧边导航栏 -->
-		<Sidebar class="sidebar-container" />
+		<Sidebar
+			v-show="sidebarMode === 'vertical'"
+			class="sidebar-container"
+			:class="{ hideSidebar: isCollapseMenu }"
+			mode="vertical"
+		/>
 		<div class="main-container">
 			<div class="main-container-breadcrumb">
 				<!-- 面包屑 -->
@@ -22,7 +27,7 @@ import Sidebar from './components/Sidebar/index.vue'
 import Breadcrumb from './components/Breadcrumb/Breadcrumb.vue'
 import { getAppCollapseMenu } from '@/hooks/appWindow'
 
-const isCollapseMenu = getAppCollapseMenu()
+const { isCollapseMenu, sidebarMode } = getAppCollapseMenu()
 </script>
 
 <style lang="scss" scoped></style>

src/router/otherRoute.ts

@@ -17,13 +17,13 @@ export const safeManagerRoutes: Array<AppRouteRecordRaw> = [
 				path: 'userlist',
 				name: 'userlist',
 				component: () => import('@/views/useradmin/userlist/index.vue'),
-				meta: { title: t('route.userList'), icon: 'daosanjiao' },
+				meta: { title: t('route.userList'), icon: 'iEL-avatar' },
 			},
 			{
 				path: 'index',
 				name: 'index',
 				component: () => import('@/views/index/index.vue'),
-				meta: { title: t('route.userDateil'), icon: 'daosanjiao' },
+				meta: { title: t('route.userDateil') },
 			},
 		],
 	},

src/store/module/app/index.ts

@@ -4,28 +4,42 @@ const actionTypes = {}
 
 const mutationTypes = {
 	SET_COLLAPSEMENU: 'SET_COLLAPSEMENU',
+	SET_SIDEBARMODE: 'SET_SIDEBARMODE',
 }
 
 interface StoreUser {
 	collapseMenu: boolean
+	sidebarMode: string
 }
 
+const locstorCollapse = localStorage.getItem('appCollapseMenu') || 'false'
+const locMenu = JSON.parse(locstorCollapse)
+
+const locstorsSidebarMode = localStorage.getItem('appSidebarMode') || 'vertical'
+console.log(locstorsSidebarMode)
+
 const store: Module<StoreUser, unknown> = {
 	namespaced: false, // 是否加上所属的模块名
 	state() {
 		return {
-			collapseMenu: false,
+			collapseMenu: locMenu || false,
+			sidebarMode: locstorsSidebarMode,
 		}
 	},
 	mutations: {
 		[mutationTypes.SET_COLLAPSEMENU](state: StoreUser, payload: boolean) {
 			state.collapseMenu = payload
 			localStorage.setItem('appCollapseMenu', JSON.stringify(payload))
 		},
+		[mutationTypes.SET_SIDEBARMODE](state: StoreUser, payload: string) {
+			state.sidebarMode = payload
+			localStorage.setItem('appSidebarMode', payload)
+		},
 	},
 	actions: {},
 	getters: {
 		collapseMenu: (state) => state.collapseMenu,
+		sidebarMode: (state) => state.sidebarMode,
 	},
 }