update topmenu mobile style

Author: sendya

src/components/page/GlobalHeader.vue

@@ -17,16 +17,20 @@
     <div v-else :class="['top-nav-header-index', theme]">
       <div class="header-index-wide">
         <div class="header-index-left">
-          <logo class="top-nav-header" />
+          <logo class="top-nav-header" :show-title="device !== 'mobile'" />
           <s-menu
+            v-if="device !== 'mobile'"
             mode="horizontal"
             :menu="menus"
             :theme="theme"
           ></s-menu>
+          <a-icon
+            v-else
+            class="trigger"
+            :type="collapsed ? 'menu-fold' : 'menu-unfold'"
+            @click.native="toggle"></a-icon>
         </div>
-        <user-menu class="header-index-right">
-
-        </user-menu>
+        <user-menu class="header-index-right"></user-menu>
       </div>
     </div>
 

src/components/page/GlobalLayout.vue

@@ -27,6 +27,25 @@
         :collapsed="collapsed"
         :collapsible="true"></side-menu>
     </template>
+    <!-- 下次优化这些代码 -->
+    <template v-else>
+      <a-drawer
+        v-if="device === 'mobile'"
+        :wrapClassName="'drawer-sider ' + theme"
+        placement="left"
+        @close="() => this.collapsed = false"
+        :closable="false"
+        :visible="collapsed"
+      >
+        <side-menu
+          mode="inline"
+          :menus="menus"
+          @menuSelect="menuSelect"
+          :theme="theme"
+          :collapsed="false"
+          :collapsible="true"></side-menu>
+      </a-drawer>
+    </template>
 
     <a-layout :class="[layoutMode]">
       <!-- layout header -->
@@ -128,6 +147,9 @@
           overflow-y: auto;
         }
       }
+
+
+
     }
 
     &.ant-layout-has-sider {
@@ -199,6 +221,41 @@
       }
     }
 
+    &.mobile {
+      .top-nav-header-index {
+
+        .header-index-wide {
+
+          .header-index-left {
+
+            .trigger {
+              color: rgba(255, 255, 255, 0.85);
+              padding: 0 12px;
+            }
+
+            .logo.top-nav-header {
+              text-align: center;
+              width: 56px;
+              line-height: 58px;
+            }
+          }
+        }
+
+        &.light {
+
+          .header-index-wide {
+
+            .header-index-left {
+              .trigger {
+                color: rgba(0, 0, 0, 0.65);
+              }
+            }
+          }
+          //
+        }
+      }
+    }
+
     .top-nav-header-index {
       box-shadow: 0 1px 4px rgba(0,21,41,.08);
       position: relative;

src/components/tools/Logo.vue

@@ -1,14 +1,26 @@
 <template>
   <div class="logo">
-    <router-link :to="{name:'dashboard'}">
+    <router-link :to="{name:'dashboard'}" style="overflow: hidden; text-overflow:ellipsis; white-space: nowrap;">
       <img src="~@/assets/logo.svg" alt="logo">
-      <h1>Ant Design Pro</h1>
+      <h1 v-if="showTitle">{{ title }}</h1>
     </router-link>
   </div>
 </template>
 
 <script>
   export default {
-    name: "Logo"
+    name: "Logo",
+    props: {
+      title: {
+        type: String,
+        default: 'Ant Design Pro',
+        required: false
+      },
+      showTitle: {
+        type: Boolean,
+        default: true,
+        required: false
+      }
+    }
   }
 </script>