add top-nav-menu

Author: sendya

src/components/chart/Liquid.vue

@@ -0,0 +1,61 @@
+<template>
+  <div>
+    <v-chart :forceFit="true" :height="height" :width="width" :data="data" :scale="scale" :padding="0">
+      <v-tooltip />
+      <v-interval
+        :shape="['liquid-fill-gauge']"
+        position="transfer*value"
+        color=""
+        :v-style="{
+          lineWidth: 10,
+          opacity: 0.75
+        }"
+        :tooltip="[
+          'transfer*value',
+          (transfer, value) => {
+            return {
+              name: transfer,
+              value,
+            };
+          },
+        ]"
+      ></v-interval>
+      <v-guide
+        v-for="(row, index) in data"
+        :key="index"
+        type="text"
+        :top="true"
+        :position="{
+          gender: row.transfer,
+          value: 45
+        }"
+        :content="row.value + '%'"
+        :v-style="{
+          fontSize: 100,
+          textAlign: 'center',
+          opacity: 0.75,
+        }"
+      />
+    </v-chart>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Liquid",
+    props: {
+      height: {
+        type: Number,
+        default: 0
+      },
+      width: {
+        type: Number,
+        default: 0
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/components/layouts/PageView.vue

@@ -1,5 +1,5 @@
 <template>
-  <page-layout :desc="description" :title="getTitle" :link-list="linkList">
+  <page-layout :desc="description" :title="getTitle" :link-list="linkList" :search="search" :tabs="tabs">
     <div slot="extra" class="extra-img">
       <img :src="extraImage"/>
     </div>
@@ -23,7 +23,9 @@
         title: '',
         description: '',
         linkList: [],
-        extraImage: ''
+        extraImage: '',
+        search: false,
+        tabs: {}
       }
     },
     mounted () {
@@ -45,10 +47,13 @@
         this.title = this.$route.meta.title
         // 因为套用了一层 route-view 所以要取 ref 对象下的子节点的第一个对象
         const content = this.$refs.content && this.$refs.content.$children[0]
+
         if (content) {
           this.description = content.description
           this.linkList = content.linkList
           this.extraImage = content.extraImage
+          this.search = content.search == true ? true : false
+          this.tabs = content.tabs
         }
       }
     }

src/components/menu/SideMenu.vue

@@ -5,12 +5,7 @@
     :collapsible="collapsible"
     v-model="collapsed" 
     :trigger="null">
-    <div class="logo">
-      <router-link :to="{name:'dashboard'}">
-        <img src="~@/assets/logo.svg" alt="logo">
-        <h1>Ant Design Pro</h1>
-      </router-link>
-    </div>
+    <logo />
     <s-menu
       :collapsed="collapsed"
       :menu="menus"
@@ -24,12 +19,13 @@
 
 <script>
   import ALayoutSider from "ant-design-vue/es/layout/Sider"
+  import Logo from '../tools/Logo'
   import SMenu from './index'
   import { mapState } from 'vuex'
 
   export default {
     name: "SideMenu",
-    components: { ALayoutSider, SMenu },
+    components: { ALayoutSider, Logo, SMenu },
     props: {
       mode: {
         type: String,

src/components/menu/index.js

@@ -128,10 +128,14 @@ export default {
       } else {
         this.selectedKeys = [ routes.pop().path ]
       }
+
       let openKeys = []
-      routes.forEach((item) => {
-        openKeys.push(item.path)
-      })
+      if (this.mode === 'inline') {
+        routes.forEach((item) => {
+          openKeys.push(item.path)
+        })
+      }
+
       this.collapsed ? this.cachedOpenKeys = openKeys : this.openKeys = openKeys
     }
   },
@@ -142,7 +146,6 @@ export default {
         props: {
           theme: this.$props.theme,
           mode: this.$props.mode,
-          inlineCollapsed: false,
           openKeys: this.openKeys,
           selectedKeys: this.selectedKeys
         },

src/components/page/GlobalHeader.vue

@@ -1,6 +1,6 @@
 <template>
   <a-layout-header style="padding: 0px;">
-    <div class="header">
+    <div v-if="mode === 'sidemenu'" class="header">
       <a-icon
         v-if="device==='mobile'"
         class="trigger"
@@ -12,57 +12,52 @@
         :type="collapsed ? 'menu-unfold' : 'menu-fold'"
         @click.native="toggle"/>
 
-      <div class="user-wrapper">
-        <span class="action">
-          <a-icon type="question-circle-o"></a-icon>
-        </span>
-        <header-notice class="action"/>
-        <a-dropdown>
-          <span class="action ant-dropdown-link user-dropdown-menu">
-            <a-avatar class="avatar" size="small" :src="avatar()"/>
-            <span>{{ nickname() }}</span>
-          </span>
-          <a-menu slot="overlay" class="user-dropdown-menu-wrapper">
-            <a-menu-item key="0">
-              <router-link :to="{ name: 'center' }">
-                <a-icon type="user"/>
-                <span>个人中心</span>
-              </router-link>
-            </a-menu-item>
-            <a-menu-item key="1">
-              <router-link :to="{ name: 'settings' }">
-                <a-icon type="setting"/>
-                <span>账户设置</span>
-              </router-link>
-            </a-menu-item>
-            <a-menu-item key="2" disabled>
-              <a-icon type="setting"/>
-              <span>测试</span>
-            </a-menu-item>
-            <a-menu-divider/>
-            <a-menu-item key="3">
-              <a href="javascript:;" @click="handleLogout">
-                <a-icon type="logout"/>
-                <span>退出登录</span>
-              </a>
-            </a-menu-item>
-          </a-menu>
-        </a-dropdown>
+      <user-menu></user-menu>
+    </div>
+    <div v-else :class="['top-nav-header-index', theme]">
+      <div class="header-index-wide">
+        <div class="header-index-left">
+          <logo class="top-nav-header" />
+          <s-menu
+            mode="horizontal"
+            :menu="menus"
+            :theme="theme"
+          ></s-menu>
+        </div>
+        <user-menu class="header-index-right">
+
+        </user-menu>
       </div>
     </div>
+
   </a-layout-header>
 </template>
 
 <script>
-  import HeaderNotice from './HeaderNotice'
-  import {mapActions, mapGetters} from 'vuex'
+  import UserMenu from '../tools/UserMenu'
+  import SMenu from '../menu/'
+  import Logo from '../tools/Logo'
+
+  import { mapState } from 'vuex'
 
   export default {
     name: "LayoutHeader",
     components: {
-      HeaderNotice
+      UserMenu,
+      SMenu,
+      Logo
     },
     props: {
+      mode: {
+        type: String,
+        // sidemenu, topmenu
+        default: 'sidemenu'
+      },
+      theme: {
+        type: String,
+        required: false,
+        default: 'dark'
+      },
       collapsed: {
         type: Boolean,
         required: false,
@@ -75,41 +70,27 @@
       }
     },
     data() {
-      return {}
+      return {
+        menus: [],
+      }
     },
     created() {
-
+      this.menus = this.mainMenu.find((item) => item.path === '/').children
+    },
+    computed: {
+      ...mapState({
+        mainMenu: state => state.permission.addRouters,
+      }),
     },
     methods: {
-      ...mapActions(["Logout"]),
-      ...mapGetters(["nickname", "avatar"]),
-      handleLogout() {
-        const that = this
 
-        this.$confirm({
-          title: '提示',
-          content: '真的要注销登录吗 ?',
-          onOk() {
-            return that.Logout({}).then(() => {
-              window.location.reload()
-            }).catch(err => {
-              that.$message.error({
-                title: '错误',
-                description: err.message
-              })
-            })
-          },
-          onCancel() {
-          },
-        });
-      },
       toggle() {
         this.$emit('toggle')
       }
     }
   }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 
 </style>