goelia-ai-admin/src/layout/MenuSingleLayer.vue

<template>
  <el-container >
    <el-aside width="140px" style="margin-bottom: 20px">
      <sidebarA class="sidebar-container" />
    </el-aside>
    <el-container>
      <el-header class="header">
        <!-- 头部 导航 -->
        <navbar :nameshow="nameshow" @helpcenterEvent="showhelp" />

      </el-header>
      <el-main>
        <div :class="{hasTagsView:needTagsView}" class="main-container">
          <div :class="{'fixed-header':fixedHeader}">
            <div style="margin: 10px 0 0 10px">
              <tags-view v-if="needTagsView" />
              <app-main />
              <CozeChat></CozeChat>
            </div>
          </div>
        </div>
      </el-main>
      <right-panel v-if="showSettings">
        <settings />
      </right-panel>
    </el-container>
  </el-container>


</template>

<script>
	import RightPanel from '@/components/RightPanel'
	import { AppMain, Navbar, Settings, Sidebar, TagsView, HelpWord,CozeChat } from './components'
	import SubSidebar from './components/subSidebar'
	import ResizeMixin from './mixin/ResizeHandler'
  import sidebarA from './components/SidebarA'
	import { mapState } from 'vuex'

	export default {
		name: 'Layout',
		components: {
			AppMain,
			Navbar,
			RightPanel,
			Settings,
			Sidebar,
			SubSidebar,
			TagsView,
			HelpWord,
      sidebarA,
      CozeChat
		},
		mixins: [ResizeMixin],
		computed: {
			...mapState({
				sidebar: state => state.app.sidebar,
				device: state => state.app.device,
				showSettings: state => state.settings.showSettings,
				needTagsView: state => state.settings.tagsView,
				fixedHeader: state => state.settings.fixedHeader
			}),
			classObj() {
				return {
					hideSidebar: !this.sidebar.opened,
					openSidebar: this.sidebar.opened,
					withoutAnimation: this.sidebar.withoutAnimation,
					mobile: this.device === 'mobile'
				}
			}
		},
		data() {
			return {
        sidebarType:1,
				currRouter: null,
				nameshow: false,
				showhelped: false
			}
		},

		methods: {
			handleClickOutside() {
				this.$store.dispatch('app/closeSideBar', {
					withoutAnimation: false
				})
			},
			byChildByParent(currRouter) {
				this.currRouter = currRouter;
				if(currRouter === null) {
					this.nameshow = false
				} else {
					this.nameshow = true
				}
			},
			showhelp(data) {
				this.showhelped = data
			}
		}
	}
</script>


<style lang="scss" scoped>
	@import "../styles/mixin.scss";
	@import "../styles/variablesSingleLayer.scss";
	::v-deep .el-main {
		padding: 0;
	}

	.el-header {
		padding: 0;
		position: fixed;
		width: -webkit-calc(100% - #{$sideBarWidth});
		width: -moz-calc(100% - #{$sideBarWidth});
		width: calc(100% - #{$sideBarWidth});
		top: 0;
		z-index: 1000;
	}

	.el-main {
		margin-top: 50px;
	}

	.app-wrapper {
		@include clearfix;
		position: relative;
		height: 100%;
		width: 100%;
		&.mobile.openSidebar {
			position: fixed;
			top: 0;
		}
	}

	.drawer-bg {
		background: #000;
		opacity: 0.3;
		width: 100%;
		top: 0;
		height: 100%;
		position: absolute;
		z-index: 999;
	}

	.fixed-header {
		position: fixed;
		top: 0;
		right: 0;
		z-index: 9;
		width: calc(100% - #{$sideBarWidth});
		transition: width 0.28s;
	}

	.hideSidebar .fixed-header {
		width: calc(100% - 54px)
	}

	.mobile .fixed-header {
		width: 100%;
	}

	.helpcenter {
		flex: 1.5;
		margin-left: 10px;
		margin-right: -20px;
		margin-top: 10px;
		border-radius: 5px;
		box-shadow: 0 0 5px rgba(100, 100, 100, .2);
	}

	.min_width{
		width: calc(100vw - 250px);
	}

	.max_width{
		width: calc(100vw - 130px);
	}

	.left_main{
		display: flex;
		padding: 0px 20px;
		background-color: #f8f8f8;
		height: calc(100vh - 50px);
		overflow: hidden;
		padding-right: 10px;
	}

	#main_work{
		margin-top: 10px;
		/*overflow-y: scroll;*/
		height: calc(100vh - 100px);
	}
</style>