cleanup

src/components/layout/LayoutMain.vue

@@ -1,11 +1,13 @@
 <template>
   <a-layout class="layout">
 
-    <sider-menu :menus="menus" theme="light" :collapsed="!siderOpen || collapsed" :collapsible="true"></sider-menu>
+    <sider-menu :menus="menus" :theme="menuTheme" v-if="menuMode === 'inline'" :mode="menuMode" :collapsed="!siderOpen || collapsed" :collapsible="true"></sider-menu>
 
     <a-layout>
       <!-- layout header -->
-      <layout-header :collapsed="collapsed" @toggle="toggle"></layout-header>
+      <layout-header :collapsed="collapsed" @toggle="toggle">
+
+      </layout-header>
       <!-- layout content -->
       <a-layout-content :style="{ margin: '24px 24px 0', height: '100%' }">
         <!-- content -->
@@ -35,6 +37,10 @@
     },
     data() {
       return {
+        // light, dark
+        menuTheme: 'light',
+        // inline, horizontal
+        menuMode: 'inline',
         collapsed: false,
         menus: []
       }

src/components/menu/SiderMenu.vue

@@ -6,7 +6,7 @@
                 <h1>Ant Design Pro</h1>
             </router-link>
         </div>
-        <s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" style="padding: 16px 0px;"></s-menu>
+        <s-menu :collapsed="collapsed" :menu="menus" :theme="theme" @select="onSelect" :mode="mode" style="padding: 16px 0px;"></s-menu>
     </a-layout-sider>
 </template>
 
@@ -17,6 +17,11 @@
         name: "SiderMenu",
         components: { ALayoutSider, SMenu },
         props: {
+            mode: {
+              type: String,
+              required: false,
+              default: 'inline'
+            },
             theme: {
               type: String,
               required: false,

vue.config.js

@@ -30,11 +30,10 @@ module.exports = {
       less: {
         modifyVars: {
           /* less 变量覆盖，用于自定义 ant design 主题 */
-          /*
-          'primary-color': '#1DA57A',
-          'link-color': '#1DA57A',
-          'border-radius-base': '2px',
-          */
+
+          'primary-color': '#F5222D',
+          'link-color': '#F5222D',
+          'border-radius-base': '4px',
         },
         javascriptEnabled: true,
       }