diff --git a/src/layout/component/aside.vue b/src/layout/component/aside.vue
index 77914dc14f7cc1d50f0b7ac3c4bbf19a6ccff8de..dc650c8e507d832ae200f2114401fcca57ca4eb5 100644
--- a/src/layout/component/aside.vue
+++ b/src/layout/component/aside.vue
@@ -1,55 +1,165 @@
 <template>
-	<el-aside width="240px">
-		<el-scrollbar>
-			<Vertical :menuList="menuList" />
-		</el-scrollbar>
-	</el-aside>
+	<div class="h100" v-show="!isTagsViewCurrenFull">
+		<el-aside class="layout-aside" :class="setCollapseStyle">
+			<Logo v-if="setShowLogo" />
+			<el-scrollbar class="flex-auto" ref="layoutAsideScrollbarRef" @mouseenter="onAsideEnterLeave(true)" @mouseleave="onAsideEnterLeave(false)">
+				<Vertical :menuList="menuList" />
+			</el-scrollbar>
+		</el-aside>
+	</div>
 </template>
 
 <script lang="ts">
+import { toRefs, reactive, computed, watch, getCurrentInstance, onBeforeMount, defineComponent } from 'vue';
+import { storeToRefs } from 'pinia';
+import pinia from '/@/stores/index';
+import { useRoutesList } from '/@/stores/routesList';
+import { useThemeConfig } from '/@/stores/themeConfig';
+import { useTagsViewRoutes } from '/@/stores/tagsViewRoutes';
+import Logo from '/@/layout/logo/index.vue';
 import Vertical from '/@/layout/navMenu/vertical.vue';
-import { toRefs, reactive } from 'vue';
-export default {
+
+export default defineComponent({
 	name: 'layoutAside',
-	components: { Vertical },
+	components: { Logo, Vertical },
 	setup() {
+		const { proxy } = <any>getCurrentInstance();
+		const stores = useRoutesList();
+		const storesThemeConfig = useThemeConfig();
+		const storesTagsViewRoutes = useTagsViewRoutes();
+		const { routesList } = storeToRefs(stores);
+		const { themeConfig } = storeToRefs(storesThemeConfig);
+		const { isTagsViewCurrenFull } = storeToRefs(storesTagsViewRoutes);
 		const state = reactive({
-			menuList: [
-				{
-					path: '/home',
-					meta: {
-						title: '首页',
-						icon: 'el-icon-s-home',
-					},
-					children: [
-						{
-							path: '/test-page1',
-							meta: {
-								title: '测试页1',
-								icon: 'el-icon-s-flag',
-							},
-						},
-						{
-							path: '/test-page2',
-							meta: {
-								title: '测试页2',
-								icon: 'el-icon-s-flag',
-							},
-						},
-						{
-							path: '/test-page3',
-							meta: {
-								title: '测试页3',
-								icon: 'el-icon-s-flag',
-							},
-						},
-					],
-				},
-			],
+			menuList: [],
+			clientWidth: 0,
+		});
+		// Set the width when the menu is expanded or stow
+		const setCollapseStyle = computed(() => {
+			const { layout, isCollapse, menuBar } = themeConfig.value;
+			const asideBrTheme = ['#FFFFFF', '#FFF', '#fff', '#ffffff'];
+			const asideBrColor = asideBrTheme.includes(menuBar) ? 'layout-el-aside-br-color' : '';
+			let result:string[] = [];
+			// Judge whether it is a mobile terminal
+			if (state.clientWidth <= 1000) {
+				if (isCollapse) {
+					document.body.setAttribute('class', 'el-popup-parent--hidden');
+					const asideEle = document.querySelector('.layout-container') as HTMLElement;
+					const modeDivs = document.createElement('div');
+					modeDivs.setAttribute('class', 'layout-aside-mobile-mode');
+					asideEle.appendChild(modeDivs);
+					modeDivs.addEventListener('click', closeLayoutAsideMobileMode);
+					result = [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-open'];
+				} else {
+					// Close the pop-up window
+					closeLayoutAsideMobileMode();
+					result = [asideBrColor, 'layout-aside-mobile', 'layout-aside-mobile-close'];
+				}
+			} else {
+				if (layout === 'columns') {
+					// In column layout, the width is 1px when the menu is folded
+					if (isCollapse) result = [asideBrColor, 'layout-aside-pc-1'];
+					else result = [asideBrColor, 'layout-aside-pc-220'];
+				} else {
+					// Other layouts for 64px
+					if (isCollapse) result = [asideBrColor, 'layout-aside-pc-64'];
+					else result = [asideBrColor, 'layout-aside-pc-220'];
+				}
+			}
+			proxy.mittBus.emit('aside-width', result);
+			return result;
+		});
+		// Close the mobile mask
+		const closeLayoutAsideMobileMode = () => {
+			const el = document.querySelector('.layout-aside-mobile-mode');
+			el?.setAttribute('style', 'animation: error-img-two 0.3s');
+			setTimeout(() => {
+				el?.parentNode?.removeChild(el);
+			}, 300);
+			const clientWidth = document.body.clientWidth;
+			if (clientWidth < 1000) themeConfig.value.isCollapse = false;
+			document.body.setAttribute('class', '');
+		};
+		// Set show or hidden logo
+		const setShowLogo = computed(() => {
+			let { layout, isShowLogo } = themeConfig.value;
+			return (isShowLogo && layout === 'defaults') || (isShowLogo && layout === 'columns');
+		});
+		// Set filter route
+		const setFilterRoutes = () => {
+			if (themeConfig.value.layout === 'columns') return false;
+			(state.menuList as any) = filterRoutesFun(routesList.value);
+		};
+		// Routing filter recursive function
+		const filterRoutesFun = (arr: Array<string>) => {
+			return arr
+				.filter((item: any) => !item.meta.isHide)
+				.map((item: any) => {
+					item = Object.assign({}, item);
+					if (item.children) item.children = filterRoutesFun(item.children);
+					return item;
+				});
+		};
+		// Set whether the menu navigation is fixed（mobile）
+		const initMenuFixed = (clientWidth: number) => {
+			state.clientWidth = clientWidth;
+		};
+		// Move the mouse in and out
+		const onAsideEnterLeave = (bool: Boolean) => {
+			let { layout } = themeConfig.value;
+			if (layout !== 'columns') return false;
+			if (!bool) proxy.mittBus.emit('restoreDefault');
+			stores.setColumnsMenuHover(bool);
+		};
+		// Monitor the changes of the themeConfig configuration file, and update the height of the menu el-scrollbar
+		watch(themeConfig.value, (val) => {
+			if (val.isShowLogoChange !== val.isShowLogo) {
+				if (!proxy.$refs.layoutAsideScrollbarRef) return false;
+				proxy.$refs.layoutAsideScrollbarRef.update();
+			}
+		});
+		// Monitor the change of vuex value and dynamically assign it to the menu
+		watch(
+			pinia.state,
+			(val) => {
+				let { layout, isClassicSplitMenu } = val.themeConfig.themeConfig;
+				if (layout === 'classic' && isClassicSplitMenu) return false;
+				setFilterRoutes();
+			},
+			{
+				deep: true,
+			}
+		);
+		onBeforeMount(() => {
+			initMenuFixed(document.body.clientWidth);
+			setFilterRoutes();
+			// This interface does not need to cancel listening(proxy.mittBus.off('setSendColumnsChildren))
+			// Because some monitoring needs to be used when switching layouts, some operations will not take effect if monitoring is cancelled
+			proxy.mittBus.on('setSendColumnsChildren', (res: any) => {
+				state.menuList = res.children;
+			});
+			proxy.mittBus.on('setSendClassicChildren', (res: any) => {
+				let { layout, isClassicSplitMenu } = themeConfig.value;
+				if (layout === 'classic' && isClassicSplitMenu) {
+					state.menuList = [];
+					state.menuList = res.children;
+				}
+			});
+			proxy.mittBus.on('getBreadcrumbIndexSetFilterRoutes', () => {
+				setFilterRoutes();
+			});
+			proxy.mittBus.on('layoutMobileResize', (res: any) => {
+				initMenuFixed(res.clientWidth);
+				closeLayoutAsideMobileMode();
+			});
 		});
 		return {
+			setCollapseStyle,
+			setShowLogo,
+			isTagsViewCurrenFull,
+			onAsideEnterLeave,
 			...toRefs(state),
 		};
 	},
-};
-</script>
\ No newline at end of file
+});
+</script>