2022年5月29日从svn移到git

src/layout/index2.vue

@@ -0,0 +1,188 @@
+<template>
+  <el-container style="background-color: #f2f2f2;">
+        <el-header>
+          <top></top>
+        </el-header>
+        <el-container style="padding-top: 10px;">
+          <el-aside :width="isCollapse? '54px':'200px'">
+             <div class="el-aside-header">
+                <span v-if="!isCollapse" style="padding: 0px 10px;">全部功能</span>
+                <hamburger id="hamburger-container" :is-active="isCollapse" class="hamburger-container" @toggleClick="toggleSideBar" />
+             </div>
+             <div class="el-aside-menu" >
+               <el-scrollbar class="theme-dark" wrap-class="scrollbar-wrapper">
+                   <el-menu :default-active="activeMenu"
+                       :collapse="isCollapse"
+                       :unique-opened="true"
+                       active-text-color="#ffd04b"
+                       :collapse-transition="false"
+                       mode="vertical" >
+                       <sidebar-item
+                           v-for="(route, index) in sidebarRouters"
+                           :key="route.path  + index"
+                           :item="route"
+                           :base-path="route.path" />
+                   </el-menu>
+               </el-scrollbar>
+             </div>
+          </el-aside>
+          <el-main>
+            <div class="main-container">
+              <uc-header></uc-header>
+              <app-main />
+              <right-panel v-if="showSettings">
+                <settings />
+              </right-panel>
+            </div>
+          </el-main>
+        </el-container>
+  </el-container>
+</template>
+
+<script>
+import top from './components/TopNav/Index.vue'
+import UcHeader from './components/UcHeader/Index.vue'
+import Hamburger from '@/components/Hamburger'
+import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapGetters, mapState } from "vuex";
+import SidebarItem from "./components/Sidebar/SidebarItem";
+import variables from "@/assets/styles/variables.scss";
+
+export default {
+  name: 'Layout',
+  data(){
+     return {
+        aside:{
+          collapse:false,
+          width:'200px'
+        }
+     }
+  },
+  components: {
+    AppMain,
+    Navbar,
+    RightPanel,
+    Settings,
+    Sidebar,
+    TagsView,
+    top,
+    Hamburger,
+    SidebarItem,
+    UcHeader
+  },
+  mixins: [ResizeMixin],
+  computed: {
+    ...mapState({
+      theme: state => state.settings.theme,
+      sideTheme: state => state.settings.sideTheme,
+      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
+    }),
+    ...mapGetters(["sidebarRouters", "sidebar"]),
+    activeMenu() {
+        const route = this.$route;
+        const { meta, path } = route;
+        // if set path, the sidebar will highlight the path you set
+        if (meta.activeMenu) {
+            return meta.activeMenu;
+        }
+        return path;
+    },
+    showLogo() {
+        return this.$store.state.settings.sidebarLogo;
+    },
+    isCollapse() {
+        return !this.sidebar.opened;
+    },
+    variables() {
+      return variables;
+    },
+    mainHeight(){
+      let windowHeight=document.documentElement.clientHeight;
+      return windowHeight-60;
+    }
+  },
+  methods: {
+    toggleSideBar(){
+      this.$store.dispatch('app/toggleSideBar')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/assets/styles/mixin.scss";
+  @import "~@/assets/styles/variables.scss";
+ .el-container {
+     height: 100%;
+     // 不能通过css引用public下的图片，虚拟目录下会找不到
+     //background: url($WEB_BASE_URL/images/center_bg.jpg);
+    //  background-size: cover;
+  }
+  .el-header {
+    padding: 0px;
+    height: 40px !important;
+  }
+  .el-aside{
+    margin-bottom: 0px;
+    padding: 0px;
+    background-color: transparent;
+   
+  }
+  .el-aside-header{
+    height: 40px;
+    line-height: 40px;
+  }
+  .el-aside-menu{
+    overflow: hidden;
+    .scrollbar-wrapper {
+      overflow-x: hidden !important;
+    }
+    .el-scrollbar__bar.is-vertical {
+      right: 0px;
+    }
+
+    .el-scrollbar {
+      height: 100%;
+    }
+    .el-menu {
+      border: none;
+      height: 100%;
+      width: 100% !important;
+    }
+
+    .el-menu-item, .el-submenu__title {
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+      white-space: nowrap !important;
+    }
+
+  }
+  .el-menu{
+    border-right: solid 0px #e6e6e6;
+  }
+  .el-main{
+    padding: 0px;
+    margin: 0px;
+    height: 100%;
+  }
+
+  .hamburger-container {
+    line-height: 30px;
+    height: 100%;
+    float: right;
+    cursor: pointer;
+    transition: background .3s;
+    -webkit-tap-highlight-color:transparent;
+
+    &:hover {
+      background: rgba(0, 0, 0, .025)
+    }
+  }
+
+</style>