feat(system-client): impl new navbar

maslow · Aug 31, 2021 · 1fbf8cd · 1fbf8cd
1 parent 0883253
commit 1fbf8cd
Show file tree

Hide file tree

Showing 5 changed files with 156 additions and 168 deletions.
diff --git a/packages/system-client/src/layout/app.vue b/packages/system-client/src/layout/app.vue
@@ -0,0 +1,103 @@
+<template>
+  <div :class="classObj" class="app-wrapper">
+    <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}" 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">
+        <settings />
+      </right-panel> -->
+    </div>
+  </div>
+</template>
+
+<script>
+// import RightPanel from '@/components/RightPanel'
+import { AppMain, Navbar, Sidebar, TagsView } from './components'
+import ResizeMixin from './mixin/ResizeHandler'
+import { mapState } from 'vuex'
+
+export default {
+  name: 'Layout',
+  components: {
+    AppMain,
+    Navbar,
+    // RightPanel,
+    // Settings,
+    Sidebar,
+    TagsView
+  },
+  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'
+      }
+    }
+  },
+  methods: {
+    handleClickOutside() {
+      this.$store.dispatch('app/closeSideBar', { withoutAnimation: false })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "~@/styles/mixin.scss";
+  @import "~@/styles/variables.scss";
+
+  .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%;
+  }
+</style>
diff --git a/packages/system-client/src/layout/components/AppMain.vue b/packages/system-client/src/layout/components/AppMain.vue
@@ -1,7 +1,6 @@
 <template>
   <section class="app-main">
     <!-- <transition name="fade-transform" mode="out-in"> -->
-    <!-- <keep-alive> -->
 
     <keep-alive :include="cachedViews">
       <router-view :key="key" />

diff --git a/packages/system-client/src/layout/components/Navbar.vue b/packages/system-client/src/layout/components/Navbar.vue
@@ -1,33 +1,25 @@
 <template>
   <div class="navbar">
-    <!-- <hamburger id="hamburger-container" :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" /> -->
-
-    <!-- <breadcrumb id="breadcrumb-container" class="breadcrumb-container" /> -->
-
+    <div class="logo">LaF 开发控制台</div>
+    <div class="tags-view-container">
+      <tags-view v-if="needTagsView" />
+    </div>
     <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">
-          <size-select id="size-select" class="right-menu-item hover-effect" />
-        </el-tooltip> -->
-
       </template>
-
-      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
-        <div class="avatar-wrapper">
-          <img :src="avatar+'?imageView2/1/w/80/h/80'" class="user-avatar">
+      <div class="github right-menu-item">
+        <a target="_blank" href="https://github.com/Maslow/laf/">
+          Github
+        </a>
+      </div>
+      <el-dropdown class="profile-container right-menu-item hover-effect" trigger="click">
+        <div class="profile-wrapper">
+          <div class="user-name">Maslow</div>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-          <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">
             <span style="display:block;">退出登录</span>
           </el-dropdown-item>
@@ -38,32 +30,24 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-// import Breadcrumb from '@/components/Breadcrumb'
-import Hamburger from '@/components/Hamburger'
-import ErrorLog from '@/components/ErrorLog'
+import { mapGetters, mapState } from 'vuex'
 import Screenfull from '@/components/Screenfull'
-// import SizeSelect from '@/components/SizeSelect'
-
+import TagsView from './TagsView'
 export default {
   components: {
-    // Breadcrumb,
-    Hamburger,
-    ErrorLog,
-    Screenfull
-    // SizeSelect
+    Screenfull,
+    TagsView
   },
   computed: {
     ...mapGetters([
-      'sidebar',
-      'avatar',
+      'name',
       'device'
-    ])
+    ]),
+    ...mapState({
+      needTagsView: state => state.settings.tagsView
+    })
   },
   methods: {
-    toggleSideBar() {
-      this.$store.dispatch('app/toggleSideBar')
-    },
     async logout() {
       await this.$store.dispatch('user/logout')
       this.$router.push(`/login?redirect=${this.$route.fullPath}`)
@@ -75,38 +59,28 @@ export default {
 <style lang="scss" scoped>
 .navbar {
   height: 50px;
-  overflow: hidden;
-  position: relative;
+  display: flex;
   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);
 
-  .hamburger-container {
-    line-height: 46px;
-    height: 100%;
-    float: left;
-    cursor: pointer;
-    transition: background .3s;
-    -webkit-tap-highlight-color:transparent;
-
-    &:hover {
-      background: rgba(0, 0, 0, .025)
-    }
-  }
-
-  .breadcrumb-container {
-    float: left;
+  .logo {
+    min-width: 180px;
+    width: 180px;
+    line-height: 50px;
+    text-align: center;
   }
 
-  .errLog-container {
-    display: inline-block;
-    vertical-align: top;
+  .tags-view-container {
+    width: 100%;
   }
 
   .right-menu {
     float: right;
     height: 100%;
+    width: 200px;
     line-height: 50px;
+    display: flex;
 
     &:focus {
       outline: none;
@@ -116,9 +90,10 @@ export default {
       display: inline-block;
       padding: 0 8px;
       height: 100%;
-      font-size: 18px;
+      font-size: 16px;
       color: #5a5e66;
       vertical-align: text-bottom;
+      align-self: center;
 
       &.hover-effect {
         cursor: pointer;
@@ -130,26 +105,24 @@ export default {
       }
     }
 
-    .avatar-container {
-      margin-right: 30px;
+    .github {
+      font-size: 16px;
+    }
 
-      .avatar-wrapper {
-        margin-top: 5px;
-        position: relative;
+    .profile-container {
+      margin-right: 20px;
+      .profile-wrapper {
+        display: flex;
 
-        .user-avatar {
+        .user-name {
           cursor: pointer;
-          width: 32px;
-          height: 32px;
-          border-radius: 10px;
+          font-size: 16px;
         }
 
         .el-icon-caret-bottom {
           cursor: pointer;
-          position: absolute;
-          right: -20px;
-          top: 20px;
           font-size: 12px;
+          align-self: center;
         }
       }
     }

diff --git a/packages/system-client/src/layout/components/TagsView/index.vue b/packages/system-client/src/layout/components/TagsView/index.vue
@@ -171,11 +171,10 @@ export default {
       }
     },
     openMenu(tag, e) {
-      const menuMinWidth = 105
-      const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
+      const menuMinWidth = 0
       const offsetWidth = this.$el.offsetWidth // container width
       const maxLeft = offsetWidth - menuMinWidth // left boundary
-      const left = e.clientX - offsetLeft + 15 // 15: margin right
+      const left = e.clientX
 
       if (left > maxLeft) {
         this.left = maxLeft
@@ -201,14 +200,10 @@ export default {
 .tags-view-container {
   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);
+  padding-top: 6px;
   .tags-view-wrapper {
     .tags-view-item {
       display: inline-block;
-      position: relative;
       cursor: pointer;
       height: 28px;
       line-height: 28px;
@@ -265,29 +260,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-//reset element css of el-icon-close
-.tags-view-wrapper {
-  .tags-view-item {
-    .el-icon-close {
-      width: 16px;
-      height: 16px;
-      vertical-align: 2px;
-      border-radius: 50%;
-      text-align: center;
-      transition: all .3s cubic-bezier(.645, .045, .355, 1);
-      transform-origin: 100% 50%;
-      &:before {
-        transform: scale(.6);
-        display: inline-block;
-        vertical-align: -3px;
-      }
-      &:hover {
-        background-color: #b4bccc;
-        color: #fff;
-      }
-    }
-  }
-}
-</style>