feat(server-client): impl layout for app

labring · Sep 2, 2021 · 9d973f0 · 9d973f0
1 parent 0f7f74d
commit 9d973f0
Show file tree

Hide file tree

Showing 6 changed files with 108 additions and 198 deletions.
diff --git a/packages/system-client/src/layout/app.vue b/packages/system-client/src/layout/app.vue
@@ -1,103 +1,63 @@
 <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 class="app-wrapper">
+    <navbar :title="title" class="fixed-header" />
+    <div class="main">
+      <div class="sidebar">
+        <sidebar class="sidebar-container" />
       </div>
-      <app-main />
-      <!-- <right-panel v-if="showSettings">
-        <settings />
-      </right-panel> -->
+      <app-main v-if="app" />
     </div>
   </div>
 </template>
 
 <script>
-// import RightPanel from '@/components/RightPanel'
-import { AppMain, Navbar, Sidebar, TagsView } from './components'
+import store from '@/store'
+import { AppMain, Navbar, Sidebar } from './components'
 import ResizeMixin from './mixin/ResizeHandler'
-import { mapState } from 'vuex'
+import { resetRouter } from '@/router'
 
 export default {
-  name: 'Layout',
+  name: 'AppLayout',
   components: {
     AppMain,
     Navbar,
-    // RightPanel,
-    // Settings,
-    Sidebar,
-    TagsView
+    Sidebar
   },
   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'
-      }
+    title() {
+      return this.app?.name
+    },
+    app() {
+      return store.state.app.application
     }
   },
+  async created() {
+    console.log('app layout created', this.$route)
+  },
+  beforeDestroy() {
+    resetRouter()
+    store.dispatch('tagsView/delAllViews')
+  },
   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;
+    .sidebar {
+    }
+    .main {
+      padding-top: 50px;
+      display: flex;
     }
   }
-
-  .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%;
+    transition: width 0.28s;
   }
 </style>
diff --git a/packages/system-client/src/layout/components/Navbar.vue b/packages/system-client/src/layout/components/Navbar.vue
@@ -1,25 +1,30 @@
 <template>
   <div class="navbar">
-    <div class="logo">LaF 开发控制台</div>
+    <div class="nav-leading">
+      <div class="logo">
+        <img src="https://laf.laogen.site/logo.png">
+      </div>
+      <div class="title">{{ title }}</div>
+    </div>
+    <div class="sep" />
     <div class="tags-view-container">
-      <tags-view v-if="needTagsView" />
+      <tags-view v-if="!hideTags" />
     </div>
     <div class="right-menu">
       <template v-if="device!=='mobile'">
         <screenfull id="screenfull" class="right-menu-item hover-effect" />
       </template>
       <div class="github right-menu-item">
         <a target="_blank" href="https://github.com/Maslow/laf/">
-          Github
+          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>
+          <div class="user-name">{{ name }}</div>
           <i class="el-icon-caret-bottom" />
         </div>
         <el-dropdown-menu slot="dropdown">
-
           <el-dropdown-item divided @click.native="logout">
             <span style="display:block;">退出登录</span>
           </el-dropdown-item>
@@ -30,22 +35,29 @@
 </template>
 
 <script>
-import { mapGetters, mapState } from 'vuex'
+import { mapGetters } from 'vuex'
 import Screenfull from '@/components/Screenfull'
 import TagsView from './TagsView'
 export default {
   components: {
     Screenfull,
     TagsView
   },
+  props: {
+    hideTags: {
+      type: Boolean,
+      default: false
+    },
+    title: {
+      type: String,
+      default: 'LaF 云开发'
+    }
+  },
   computed: {
     ...mapGetters([
       'name',
       'device'
-    ]),
-    ...mapState({
-      needTagsView: state => state.settings.tagsView
-    })
+    ])
   },
   methods: {
     async logout() {
@@ -63,12 +75,40 @@ export default {
   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);
+  align-items: center;
 
-  .logo {
-    min-width: 180px;
-    width: 180px;
+  .nav-leading {
+    width: 210px;
+    min-width: 210px;
     line-height: 50px;
-    text-align: center;
+    justify-content: flex-start;
+    display: flex;
+    align-items: center;
+    padding: 0 10px;
+    box-sizing: border-box;
+
+    .logo {
+      width: 28px;
+      height: 40px;
+      img {
+        width: 28px;
+        height: 28px;
+      }
+    }
+
+    .title {
+      margin-left: 4px;
+      font-size: 14px;
+      font-weight: bold;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+
+  .sep {
+    height: 50px;
+    border-right: 1px solid rgba(211, 211, 211, 0.15);
   }
 
   .tags-view-container {
@@ -106,7 +146,7 @@ export default {
     }
 
     .github {
-      font-size: 16px;
+      font-size: 14px;
     }
 
     .profile-container {

diff --git a/packages/system-client/src/layout/components/Sidebar/Logo.vue b/packages/system-client/src/layout/components/Sidebar/Logo.vue
diff --git a/packages/system-client/src/layout/components/Sidebar/index.vue b/packages/system-client/src/layout/components/Sidebar/index.vue
@@ -1,7 +1,6 @@
 <template>
-  <div :class="{'has-logo':showLogo}">
-    <logo v-if="showLogo" :collapse="isCollapse" />
-    <el-scrollbar wrap-class="scrollbar-wrapper">
+  <div>
+    <el-scrollbar>
       <el-menu
         :default-active="activeMenu"
         :default-openeds="openeds"
@@ -21,12 +20,11 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Logo from './Logo'
 import SidebarItem from './SidebarItem'
 import variables from '@/styles/variables.scss'
 
 export default {
-  components: { SidebarItem, Logo },
+  components: { SidebarItem },
   computed: {
     ...mapGetters([
       'permission_routes',