feat(admin): add flat mode

d2-projects · Feb 11, 2020 · 7f83464 · 7f83464
1 parent a7a4aac
commit 7f83464
Show file tree

Hide file tree

Showing 9 changed files with 89 additions and 8 deletions.
diff --git a/src/locales/main/lang/en.json b/src/locales/main/lang/en.json
@@ -70,5 +70,6 @@
   "admin.roll-tools-api.qrcode.placeholder.content": "Please input content",
   "admin.roll-tools-api.qrcode.generate": "Generate",
   "admin.roll-tools-api.qrcode.logo_type_limit": "Logo file type must be {0}",
-  "admin.roll-tools-api.qrcode.logo_size_limit": "Logo file size cannot exceed {0}"
+  "admin.roll-tools-api.qrcode.logo_size_limit": "Logo file size cannot exceed {0}",
+  "admin.preferences.flat": "Flat mode"
 }
diff --git a/src/locales/main/lang/zh-CN.json b/src/locales/main/lang/zh-CN.json
@@ -70,5 +70,6 @@
   "admin.roll-tools-api.qrcode.placeholder.content": "请输入内容",
   "admin.roll-tools-api.qrcode.generate": "立即生成",
   "admin.roll-tools-api.qrcode.logo_type_limit": "Logo 图片只能是 {0} 格式",
-  "admin.roll-tools-api.qrcode.logo_size_limit": "Logo 文件大小不能超过 {0}"
+  "admin.roll-tools-api.qrcode.logo_size_limit": "Logo 文件大小不能超过 {0}",
+  "admin.preferences.flat": "小屏模式"
 }
diff --git a/src/store/modules/admin/index.js b/src/store/modules/admin/index.js
@@ -19,6 +19,7 @@ const init = app => {
     asideTransition: true,
     pageTransition: true,
     showSourceLink: true,
+    flat: false,
 
     token: null
   })

diff --git a/src/store/modules/admin/mixins.js b/src/store/modules/admin/mixins.js
@@ -43,3 +43,9 @@ export const token = {
     ...mapFields(namespace, ['token'])
   }
 }
+
+export const flat = {
+  computed: {
+    ...mapFields(namespace, ['flat'])
+  }
+}
diff --git a/src/views/admin/$index/components/AsideNavMenu/index.vue b/src/views/admin/$index/components/AsideNavMenu/index.vue
@@ -73,6 +73,11 @@ export default {
             router: true,
             'default-active': this.$route.path,
             collapse: this.collapse
+          },
+          on: {
+            select: (index, deepIndex, targetComponent) => {
+              this.$emit('select', index, deepIndex, targetComponent)
+            }
           }
         },
         map(this.menu, it)

diff --git a/src/views/admin/$index/components/PageContainer/style.styl b/src/views/admin/$index/components/PageContainer/style.styl
@@ -53,3 +53,14 @@
     border-top none
     border-top-left-radius 0
     border-top-right-radius 0
+
+  // for flat mode
+  &.flat
+    border-radius 0
+    border-right 0
+    border-left 0
+    >
+      .header, .footer
+        border-radius 0
+        border-right 0
+        border-left 0
diff --git a/src/views/admin/$index/index.vue b/src/views/admin/$index/index.vue
@@ -1,5 +1,8 @@
 <template>
-  <el-container class="admin-container">
+  <el-container
+    class="admin-container"
+    :class="{ collapse: asideCollapse, tabs: showTabs, flat }"
+  >
     <el-header class="header">
       <smart-logo :has-transition="asideTransition" :collapse="asideCollapse" />
       <aside-nav-menu-toggle v-model="asideCollapse" />
@@ -35,6 +38,7 @@
             :has-transition="asideTransition"
             :menu="menu"
             :collapse="asideCollapse"
+            @select="handleAsideMenuItemSelected"
           />
         </div>
       </el-aside>
@@ -52,7 +56,7 @@
             <keep-alive>
               <router-view
                 class="page-wrapper"
-                :class="{ 'sharp-top': showTabs }"
+                :class="{ 'sharp-top': showTabs, flat }"
               />
             </keep-alive>
           </transition>
@@ -75,7 +79,8 @@ import {
   asideTransition,
   menu,
   sourceLink,
-  token
+  token,
+  flat
 } from '@/store/modules/admin/mixins'
 import { loginPath } from '@/routes/admin'
 
@@ -88,7 +93,8 @@ export default {
     menu,
     sourceLink,
     asideBscroll,
-    token
+    token,
+    flat
   ],
   provide: {
     '@adminContainer'(v) {
@@ -98,6 +104,16 @@ export default {
       assign(v.$options.components, internalComponents)
     }
   },
+  watch: {
+    flat(value) {
+      if (value) {
+        this.asideCollapse = true
+        this.asideTransition = false
+        this.pageTransition = false
+        this.showTabs = false
+      }
+    }
+  },
   methods: {
     handleSwitchTabs({ index }) {
       this.$router.push(index)
@@ -107,6 +123,11 @@ export default {
         this.token = null
         this.$router.push(loginPath)
       }
+    },
+    handleAsideMenuItemSelected(...args) {
+      if (this.flat) {
+        this.asideCollapse = true
+      }
     }
   },
   components: internalComponents

diff --git a/src/views/admin/$index/style.styl b/src/views/admin/$index/style.styl
@@ -1,6 +1,7 @@
 @import '../../../style/variable.styl'
 
 $aside-width = 200px
+$aside-collapse-width = 65px
 $header-height = 60px
 $right-margin = 20px
 
@@ -19,6 +20,7 @@ $right-margin = 20px
       > .action-bar
         flex 1
     .body
+      position relative
       overflow hidden
       >
         .aside
@@ -38,6 +40,30 @@ $right-margin = 20px
               left 0
               right $right-margin
               overflow-x hidden
+  &.flat >
+    .body >
+      .aside
+        position absolute
+        z-index 2000
+        top 0
+        bottom 0
+        background #ecf1f6
+        border-right 1px solid #cfd7e5
+        border-top 1px solid #cfd7e5
+        border-top-right-radius 4px
+      .center-wrapper >
+        .tabs-wrapper
+          margin-right 0
+        .main > .page-wrapper
+          right 0
+  &.flat.collapse >
+    .body >
+      .aside
+        margin-left - $aside-collapse-width
+  &.flat:not(.tabs)
+    .body >
+      .aside
+        border-top-right-radius 0
 
 .fade-transverse
   &-leave-active

diff --git a/src/views/admin/preferences/index.vue b/src/views/admin/preferences/index.vue
@@ -27,6 +27,13 @@
 
     <el-divider />
 
+    <p>
+      <b>{{ $t('admin.preferences.flat') }}：</b
+      ><el-switch v-model="flat"></el-switch>
+    </p>
+
+    <el-divider />
+
     <h2>{{ $t('admin.preferences.language') }}</h2>
     <el-radio-group v-model="$i18n.locale">
       <el-radio v-for="item in langs" :key="item.value" :label="item.value">{{
@@ -43,7 +50,8 @@ import {
   sourceLink,
   asideCollapse,
   pageTransition,
-  asideTransition
+  asideTransition,
+  flat
 } from '@/store/modules/admin/mixins'
 import { langs } from '@/locales'
 
@@ -54,7 +62,8 @@ export default {
     sourceLink,
     asideCollapse,
     pageTransition,
-    asideTransition
+    asideTransition,
+    flat
   ],
 
   data() {