perf: 调整页面布局为上下布局；不显示footer组件

src/layout/components/AppMain.vue

@@ -25,7 +25,7 @@ export default {
 <style lang="scss" scoped>
 .app-main {
   background-color: #f3f3f4;
-  min-height: calc(100vh - 50px);
+  min-height: calc(100vh - 0px);
   width: 100%;
   position: relative;
   overflow: hidden;

src/layout/components/NavHeader/Help.vue

@@ -8,6 +8,7 @@
       <el-dropdown-item command="support">{{ $t('common.nav.Support') }}</el-dropdown-item>
       <el-dropdown-item command="toolsDownload">{{ $t('common.nav.Download') }}</el-dropdown-item>
       <el-dropdown-item v-if="!hasLicence" command="enterprise">{{ $t('common.nav.EnterpriseEdition') }}</el-dropdown-item>
+      <el-dropdown-item command="github">GITHUB</el-dropdown-item>
     </el-dropdown-menu>
   </el-dropdown>
 </template>
@@ -47,6 +48,9 @@ export default {
         case 'toolsDownload':
           window.open('/core/download/', '_blank')
           break
+        case 'github':
+          window.open('https://github.com/jumpserver/jumpserver', '_blank')
+          break
         default:
           window.open(this.URLSite.HELP_DOCUMENT_URL, '_blank')
           break

src/layout/components/NavHeader/ViewSwitcher.vue

@@ -180,6 +180,7 @@ export default {
   font-size: 16px;
   text-align: center;
   color: #1F2329;
+  margin-right: 10px;
 }
 .icons-title {
   display: inline-block;

src/layout/components/NavHeader/index.vue

@@ -30,7 +30,12 @@
     </ul>
     <hamburger :is-active="sidebar.opened" class="hamburger-container is-show-menu" @toggleClick="toggleSideBar" />
     <ul class="navbar-left">
-      <li v-if="showOrganize()" class="left-item" style="margin-left: 24px">
+      <li class="left-item">
+        <div class="nav-logo">
+          <Logo v-if="showLogo" :collapse="false" />
+        </div>
+      </li>
+      <li v-if="showOrganize()" class="left-item" style="margin-left: 21px">
         <Organization class="organization" />
       </li>
     </ul>
@@ -47,6 +52,7 @@ import WebTerminal from './WebTerminal'
 import Tickets from './Tickets'
 import Organization from './Organization'
 import SystemSetting from './SystemSetting'
+import Logo from '../NavLeft/Logo'
 
 export default {
   components: {
@@ -57,7 +63,8 @@ export default {
     Tickets,
     WebTerminal,
     SiteMessages,
-    SystemSetting
+    SystemSetting,
+    Logo
   },
   data() {
     return {}
@@ -70,6 +77,9 @@ export default {
       return this.publicSettings['TICKETS_ENABLED'] &&
         this.$hasLicense() &&
         this.$hasPerm('tickets.view_ticket')
+    },
+    showLogo() {
+      return this.$store.state.settings.sidebarLogo
     }
   },
   methods: {
@@ -111,6 +121,9 @@ export default {
         & >>> .org-select {
           padding: 0;
         }
+        .nav-logo {
+          width: 200px;
+        }
       }
     }
 

src/layout/components/NavLeft/Logo.vue

@@ -74,9 +74,9 @@ export default {
 
     & .sidebar-logo-text {
       width: 150px;
-      height: 45px;
+      height: 50px;
-      padding: 2px 0;
+      padding: 0px 0 2px;
-      vertical-align: middle;
+      vertical-align: top;
       margin-right: 12px;
     }
 
@@ -93,8 +93,8 @@ export default {
   }
 
   &.collapse {
-    height: 55px;
+    height: 50px;
-    line-height: 55px;
+    line-height: 46px;
     .sidebar-logo {
       margin-right: 0;
     }

src/layout/components/NavLeft/index.vue

@@ -1,9 +1,6 @@
 <template>
   <div :class="{'has-logo': showLogo, 'show-orgs': showOrgs}">
     <div class="nav-header">
-      <div class="nav-logo">
-        <Logo v-if="showLogo" :collapse="isCollapse" />
-      </div>
       <div class="active-mobile">
         <ViewSwitcher mode="vertical" class="mobile-view-switch" />
         <Organization v-if="$hasLicense()" class="organization" />
@@ -60,7 +57,6 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import Hamburger from '@/components/Hamburger'
 import ViewSwitcher from '../NavHeader/ViewSwitcher'
@@ -70,7 +66,6 @@ import variables from '@/styles/variables.scss'
 export default {
   components: {
     SidebarItem,
-    Logo,
     Hamburger,
     ViewSwitcher,
     Organization
@@ -140,7 +135,7 @@ export default {
   .nav-title {
     position: relative;
     box-sizing: border-box;
-    padding: 17px 0 17px 20px;
+    padding: 14px 0 13px 20px;
     font-size: 16px;
     font-weight: 500;
     color: #1F2329;

src/layout/index.vue

@@ -1,19 +1,18 @@
 <template>
   <div :class="classObj" class="app-wrapper">
     <div v-if="device==='mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
-    <NavLeft class="sidebar-container disabled-when-print" />
+    <div :class="{'fixed-header': fixedHeader}" class="disabled-when-print">
+      <NavHeader />
+    </div>
     <div :class="{hasTagsView: needTagsView}" class="main-container">
-      <div :class="{'fixed-header': fixedHeader}" class="disabled-when-print">
+      <NavLeft class="sidebar-container disabled-when-print" />
-        <NavHeader />
-      </div>
       <app-main />
-      <Footer class="disabled-when-print" />
     </div>
   </div>
 </template>
 
 <script>
-import { NavHeader, NavLeft, AppMain, Footer } from './components'
+import { NavHeader, NavLeft, AppMain } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 
 export default {
@@ -21,8 +20,7 @@ export default {
   components: {
     NavLeft,
     NavHeader,
-    AppMain,
+    AppMain
-    Footer
   },
   mixins: [ResizeMixin],
   computed: {
@@ -86,14 +84,10 @@ export default {
     top: 0;
     right: 0;
     z-index: 9;
-    width: calc(100% - #{$sideBarWidth});
+    width: 100%;
     transition: width 0.28s;
   }
 
-  .hideSidebar .fixed-header {
-    width: calc(100% - 50px)
-  }
-
   .mobile .fixed-header {
     width: 100%;
   }

src/styles/sidebar.scss

@@ -1,10 +1,11 @@
 @import "./variables";
 #app {
   .main-container {
+    position: relative;
     min-height: 100%;
+    margin-top: 50px;
     transition: margin-left .28s;
     margin-left: $sideBarWidth;
-    position: relative;
   }
 
   .sidebar-container {
@@ -14,7 +15,7 @@
     height: 100%;
     position: fixed;
     font-size: 0;
-    top: 0;
+    top: 50px;
     bottom: 0;
     left: 0;
     z-index: 1001;
@@ -40,7 +41,7 @@
 
     &.has-logo {
       .el-scrollbar {
-        height: calc(100% - 157px);
+        height: calc(100% - 150px);
       }
     }