feat: support responsive for the left menu #22

saltbo · Jan 13, 2022 · 6b75490 · 6b75490
1 parent 24378d3
commit 6b75490
Show file tree

Hide file tree

Showing 6 changed files with 118 additions and 19 deletions.
diff --git a/package.json b/package.json
@@ -14,6 +14,7 @@
     "@vue/cli-plugin-eslint": "^3.12.0",
     "@vue/cli-service": "^3.12.0",
     "axios": "^0.21.1",
+    "buefy": "^0.9.14",
     "clipboard": "^2.0.8",
     "el-table-infinite-scroll": "^1.0.10",
     "element-ui": "^2.15.5",

diff --git a/src/components/Topbar/index.vue b/src/components/Topbar/index.vue
@@ -1,20 +1,41 @@
 <template>
   <el-header>
-    <div class="logo">
-      <img src="@/assets/logo.png" alt="ZPan" @click="$router.push('/')" />
+    <div class="logo" @click="onLogoClick">
+      <img src="@/assets/logo.png" alt="ZPan" />
     </div>
-    <el-menu v-if="showMenu" class="navbar" :default-active="menuActive" mode="horizontal" style="width: 100%" router>
-      <el-menu-item v-for="(menu, index) in menus.slice(0, 5)" :key="index" :index="`/${menu.name}`">{{ menu.title }}</el-menu-item>
+    <el-menu
+      v-if="showMenu"
+      class="navbar"
+      :default-active="menuActive"
+      mode="horizontal"
+      style="width: 100%"
+      router
+    >
+      <el-menu-item
+        v-for="(menu, index) in menus.slice(0, 5)"
+        :key="index"
+        :index="`/${menu.name}`"
+      >{{ menu.title }}</el-menu-item>
 
       <el-submenu index="more" v-show="menus.length > 5">
         <template slot="title">更多</template>
-        <el-menu-item v-for="(menu, index) in menus.slice(5)" :key="index" :index="menu.path">{{ menu.title }}</el-menu-item>
+        <el-menu-item
+          v-for="(menu, index) in menus.slice(5)"
+          :key="index"
+          :index="menu.path"
+        >{{ menu.title }}</el-menu-item>
       </el-submenu>
     </el-menu>
 
     <div v-if="logined" style="position: absolute; right: 20px">
       <!-- 音乐播放器 -->
-      <el-popover v-if="alistVisible" ref="alist" placement="top" width="500" style="margin-right: 20px">
+      <el-popover
+        v-if="alistVisible"
+        ref="alist"
+        placement="top"
+        width="500"
+        style="margin-right: 20px"
+      >
         <i slot="reference" class="el-icon-service"></i>
 
         <zp-aplayer ref="aplayer"></zp-aplayer>
@@ -26,11 +47,19 @@
           <el-badge v-show="ulistTotal" :value="ulistTotal" style="top: -15px"></el-badge>
         </i>
 
-        <zp-uploader ref="uploader" @uploadAdded="$refs.ulist.doShow()" @utotal-change="onUTotalChange"></zp-uploader>
+        <zp-uploader
+          ref="uploader"
+          @uploadAdded="$refs.ulist.doShow()"
+          @utotal-change="onUTotalChange"
+        ></zp-uploader>
       </el-popover>
 
       <el-dropdown trigger="click" @command="onDropdown" @visible-change="onVisible">
-        <el-avatar :size="30" :src="profile.avatar" style="vertical-align: middle; margin-right: 4px"></el-avatar>
+        <el-avatar
+          :size="30"
+          :src="profile.avatar"
+          style="vertical-align: middle; margin-right: 4px"
+        ></el-avatar>
         <span>{{ profile.nickname }}</span>
         <el-dropdown-menu slot="dropdown" style="width: 200px">
           <div style="margin: auto 20px">
@@ -43,13 +72,26 @@
                 <span style="float: right">{{ storage.percentage }}%</span>
               </p>
               <el-progress :percentage="storage.percentage" :show-text="false"></el-progress>
-              <p style="color: rgba(0, 0, 0, 0.54); font-size: 0.75rem">{{ storage.used }}/{{ storage.max }}</p>
+              <p
+                style="color: rgba(0, 0, 0, 0.54); font-size: 0.75rem"
+              >{{ storage.used }}/{{ storage.max }}</p>
             </el-row>
           </div>
 
-          <el-dropdown-item icon="el-icon-setting" command="profile" divided>{{ $t("topbar.settings") }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-set-up" command="admin" v-show="showAdmin">{{ $t("topbar.s-platform") }}</el-dropdown-item>
-          <el-dropdown-item icon="el-icon-switch-button" command="signout">{{ $t("topbar.signout") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-setting"
+            command="profile"
+            divided
+          >{{ $t("topbar.settings") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-set-up"
+            command="admin"
+            v-show="showAdmin"
+          >{{ $t("topbar.s-platform") }}</el-dropdown-item>
+          <el-dropdown-item
+            icon="el-icon-switch-button"
+            command="signout"
+          >{{ $t("topbar.signout") }}</el-dropdown-item>
         </el-dropdown-menu>
       </el-dropdown>
     </div>
@@ -101,6 +143,12 @@ export default {
     },
   },
   methods: {
+    onLogoClick() {
+      this.$emit('logoClick');
+      if (this.$route.path == '/admin') {
+        this.$router.push('/')
+      }
+    },
     onRouteChange(newVal, oldVal) {
       if (this.logined) {
         this.userInfo();

diff --git a/src/main.js b/src/main.js
@@ -4,6 +4,7 @@ import i18n from './i18n'
 import store from './store'
 import router from './router'
 import './plugins/axios'
+import './plugins/buefy'
 import './plugins/moment'
 import './plugins/element'
 import './plugins/fileexplorer'

diff --git a/src/plugins/buefy.js b/src/plugins/buefy.js
@@ -0,0 +1,5 @@
+import Vue from 'vue'
+import Buefy from 'buefy'
+import 'buefy/dist/buefy.css'
+
+Vue.use(Buefy)
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
@@ -1,9 +1,9 @@
 <template>
   <section>
-    <Topbar ref="topbar" :menus="$store.state.storages" logined />
+    <Topbar ref="topbar" :menus="$store.state.storages" logined @logoClick="onLogoClick" />
     <el-container style="height: 100%">
-      <el-aside width="200px" style="height: 100%; background-color: #f4f4f5">
-        <el-menu :default-active="leftMenuActive" background-color="#f4f4f5" router>
+      <el-aside width="200px" class="menu" v-bind:class="{ 'menu-open': menuActive }">
+        <el-menu :default-active="leftMenuActive" background-color="#f4f4f5" @select="onLogoClick" router>
           <el-menu-item v-for="menu in leftMenus" :key="menu.path" :index="menu.path">
             <i :class="menu.icon"></i>
             <span slot="title">{{ menu.title }}</span>
@@ -13,8 +13,9 @@
         <!-- <div class="copyright">
         <span>Powered by</span>
         <a href="https://github.com/saltbo/zpan" target="_blank">ZPan</a>
-      </div>-->
+        </div>-->
       </el-aside>
+      <div class="menu-bg-mask" v-bind:class="{ 'mask-open': menuActive }"></div>
 
       <el-main style="height: calc(100% - 65px)">
         <router-view @upload-action="onUploadClick" @audio-open="onAudioOpen"></router-view>
@@ -54,7 +55,9 @@ export default {
     });
   },
   data() {
-    return {};
+    return {
+      menuActive: false,
+    };
   },
   computed: {
     currentBucket() {
@@ -84,7 +87,7 @@ export default {
     },
   },
   watch: {
-    $route(newVal, oldVal) {},
+    $route(newVal, oldVal) { },
   },
   methods: {
     onUploadClick(obj) {
@@ -93,8 +96,11 @@ export default {
     onAudioOpen(obj, link) {
       this.$refs.topbar.AplayerOpen(obj, link);
     },
+    onLogoClick() {
+      this.menuActive = !this.menuActive
+    }
   },
-  mounted() {},
+  mounted() { },
 };
 </script>
 
@@ -122,4 +128,30 @@ export default {
   outline: 0;
   background-color: #eaeaea !important;
 }
+.menu {
+  width: 200px;
+  height: 100%;
+  background-color: #f4f4f5;
+}
+
+@media (max-width: 480px) {
+  .menu {
+    width: 0 !important;
+  }
+  .menu-open {
+    position: fixed;
+    width: 200px !important;
+    z-index: 999;
+  }
+
+  .menu-bg-mask {
+    height: 100%;
+    position: absolute;
+    background: rgba(1, 1, 1, 0.4);
+    z-index: 998;
+  }
+  .mask-open{
+    width: 100%;
+  }
+}
 </style>
diff --git a/yarn.lock b/yarn.lock
@@ -2346,6 +2346,13 @@ browserslist@^4.17.1, browserslist@^4.3.4:
     nanocolors "^0.2.12"
     node-releases "^1.1.76"
 
+buefy@^0.9.14:
+  version "0.9.14"
+  resolved "https://registry.npmmirror.com/buefy/download/buefy-0.9.14.tgz#f0441ece5255fa757bf9956761415341d18fe68b"
+  integrity sha512-4+8xLQBHm7H+XmCNXvEmFY01gYHvGIkMGBLxcCpbumrt5Eyj21JP7I6G313tLaT2XDk06IiNSnqgPxzFExHPjQ==
+  dependencies:
+    bulma "0.9.3"
+
 buffer-from@^1.0.0:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
@@ -2383,6 +2390,11 @@ builtin-status-codes@^3.0.0:
   resolved "https://registry.yarnpkg.com/builtin-status-codes/-/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
   integrity sha1-hZgoeOIbmOHGZCXgPQF0eI9Wnug=
 
+bulma@0.9.3:
+  version "0.9.3"
+  resolved "https://registry.npmmirror.com/bulma/download/bulma-0.9.3.tgz#ddccb7436ebe3e21bf47afe01d3c43a296b70243"
+  integrity sha1-3cy3Q26+PiG/R6/gHTxDopa3AkM=
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"