fix: 优化页面布局，去除面包屑，腾出更多页面空间等；

labring · Aug 6, 2021 · 55c3a44 · 55c3a44
1 parent 1a26cf3
commit 55c3a44
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 30 deletions.
diff --git a/packages/devops-admin/src/components/Breadcrumb/index.vue b/packages/devops-admin/src/components/Breadcrumb/index.vue
@@ -71,7 +71,7 @@ export default {
 .app-breadcrumb.el-breadcrumb {
   display: inline-block;
   font-size: 14px;
-  line-height: 50px;
+  line-height: 30px;
   margin-left: 8px;
 
   .no-redirect {

diff --git a/packages/devops-admin/src/layout/components/Navbar.vue b/packages/devops-admin/src/layout/components/Navbar.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="navbar">
-    <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
 
-    <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
+    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
 
     <div class="right-menu">
       <template v-if="device!=='mobile'">
 
+        <hamburger id="hamburger-container" :is-active="sidebar.opened" class="right-menu-item" @toggleClick="toggleSideBar" />
+
         <error-log class="errLog-container right-menu-item hover-effect" />
 
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
 
-        <el-tooltip content="Global Size" effect="dark" placement="bottom">
+        <!-- <el-tooltip content="Global Size" effect="dark" placement="bottom">
           <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip>
+        </el-tooltip> -->
 
       </template>
 
@@ -23,10 +25,7 @@
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <router-link to="/">
-            <el-dropdown-item>数据看板</el-dropdown-item>
-          </router-link>
-          <a target="_blank" href="https://github.com/Maslow/less-admin/">
+          <a target="_blank" href="https://github.com/Maslow/less-framework/">
             <el-dropdown-item>Github</el-dropdown-item>
           </a>
           <el-dropdown-item divided @click.native="logout">
@@ -40,19 +39,19 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Breadcrumb from '@/components/Breadcrumb'
+// import Breadcrumb from '@/components/Breadcrumb'
 import Hamburger from '@/components/Hamburger'
 import ErrorLog from '@/components/ErrorLog'
 import Screenfull from '@/components/Screenfull'
-import SizeSelect from '@/components/SizeSelect'
+// import SizeSelect from '@/components/SizeSelect'
 
 export default {
   components: {
-    Breadcrumb,
+    // Breadcrumb,
     Hamburger,
     ErrorLog,
-    Screenfull,
-    SizeSelect
+    Screenfull
+    // SizeSelect
   },
   computed: {
     ...mapGetters([
@@ -79,7 +78,8 @@ export default {
   overflow: hidden;
   position: relative;
   background: #fff;
-  box-shadow: 0 1px 4px rgba(0,21,41,.08);
+  border-bottom: 1px solid #d8dce5;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
 
   .hamburger-container {
     line-height: 46px;
@@ -139,16 +139,16 @@ export default {
 
         .user-avatar {
           cursor: pointer;
-          width: 40px;
-          height: 40px;
+          width: 32px;
+          height: 32px;
           border-radius: 10px;
         }
 
         .el-icon-caret-bottom {
           cursor: pointer;
           position: absolute;
           right: -20px;
-          top: 25px;
+          top: 20px;
           font-size: 12px;
         }
       }

diff --git a/packages/devops-admin/src/layout/components/Sidebar/index.vue b/packages/devops-admin/src/layout/components/Sidebar/index.vue
@@ -4,6 +4,7 @@
     <el-scrollbar wrap-class="scrollbar-wrapper">
       <el-menu
         :default-active="activeMenu"
+        :default-openeds="openeds"
         :collapse="isCollapse"
         :background-color="variables.menuBg"
         :text-color="variables.menuText"
@@ -31,6 +32,9 @@ export default {
       'permission_routes',
       'sidebar'
     ]),
+    openeds() {
+      return this.permission_routes.map(route => route.path)
+    },
     activeMenu() {
       const route = this.$route
       const { meta, path } = route

diff --git a/packages/devops-admin/src/layout/components/TagsView/index.vue b/packages/devops-admin/src/layout/components/TagsView/index.vue
@@ -199,8 +199,9 @@ export default {
 
 <style lang="scss" scoped>
 .tags-view-container {
-  height: 34px;
+  height: 50px;
   width: 100%;
+  padding-top: 14px;
   background: #fff;
   border-bottom: 1px solid #d8dce5;
   box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .12), 0 0 3px 0 rgba(0, 0, 0, .04);
@@ -209,8 +210,8 @@ export default {
       display: inline-block;
       position: relative;
       cursor: pointer;
-      height: 26px;
-      line-height: 26px;
+      height: 28px;
+      line-height: 28px;
       border: 1px solid #d8dce5;
       color: #495060;
       background: #fff;

diff --git a/packages/devops-admin/src/layout/index.vue b/packages/devops-admin/src/layout/index.vue
@@ -3,21 +3,22 @@
     <div v-if="device==='mobile'&&sidebar.opened" class="drawer-bg" @click="handleClickOutside" />
     <sidebar class="sidebar-container" />
     <div :class="{hasTagsView:needTagsView}" class="main-container">
-      <div :class="{'fixed-header':fixedHeader}">
-        <navbar />
-        <tags-view v-if="needTagsView" />
+      <div :class="{'fixed-header':fixedHeader}" style="display: flex; justify-content: space-between">
+        <tags-view v-if="needTagsView" style="" />
+
+        <navbar style="width: 220px" />
       </div>
       <app-main />
-      <right-panel v-if="showSettings">
+      <!-- <right-panel v-if="showSettings">
         <settings />
-      </right-panel>
+      </right-panel> -->
     </div>
   </div>
 </template>
 
 <script>
-import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Settings, Sidebar, TagsView } from './components'
+// import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Sidebar, TagsView } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
 import { mapState } from 'vuex'
 
@@ -26,8 +27,8 @@ export default {
   components: {
     AppMain,
     Navbar,
-    RightPanel,
-    Settings,
+    // RightPanel,
+    // Settings,
     Sidebar,
     TagsView
   },