This is an automated email from the ASF dual-hosted git repository. iluo pushed a commit to branch develop in repository https://gitbox.apache.org/repos/asf/incubator-dubbo-ops.git
The following commit(s) were added to refs/heads/develop by this push: new 03a5b78 update drawer 03a5b78 is described below commit 03a5b7847b525de36e1337fb618f15ee85ef0a80 Author: beiwei30 <ian....@gmail.com> AuthorDate: Tue Sep 11 15:11:48 2018 +0800 update drawer --- dubbo-admin-frontend/package.json | 3 - dubbo-admin-frontend/src/App.vue | 12 ---- dubbo-admin-frontend/src/api/menu.js | 26 ++++++++ dubbo-admin-frontend/src/components/Drawer.vue | 83 +++++++++++++------------- 4 files changed, 66 insertions(+), 58 deletions(-) diff --git a/dubbo-admin-frontend/package.json b/dubbo-admin-frontend/package.json index 39d70b8..57bc230 100644 --- a/dubbo-admin-frontend/package.json +++ b/dubbo-admin-frontend/package.json @@ -14,7 +14,6 @@ "axios": "^0.18.0", "vue": "^2.5.2", "vue-codemirror": "^4.0.5", - "vue-perfect-scrollbar": "^0.1.0", "vue-router": "^3.0.1", "vuetify": "^1.2.2", "vuex": "^3.0.1" @@ -56,8 +55,6 @@ "rimraf": "^2.6.0", "semver": "^5.3.0", "shelljs": "^0.7.6", - "stylus": "^0.54.5", - "stylus-loader": "^3.0.2", "uglifyjs-webpack-plugin": "^1.1.1", "url-loader": "^1.0.1", "vue-loader": "^13.3.0", diff --git a/dubbo-admin-frontend/src/App.vue b/dubbo-admin-frontend/src/App.vue index fa1f531..c610359 100644 --- a/dubbo-admin-frontend/src/App.vue +++ b/dubbo-admin-frontend/src/App.vue @@ -67,15 +67,3 @@ name: 'App' } </script> - - -<style lang="stylus" scoped> - .setting-fab - top: 50% !important; - right: 0; - border-radius: 0 - - .page-wrapper - min-height: calc(100vh - 64px - 50px - 81px); - -</style> diff --git a/dubbo-admin-frontend/src/api/menu.js b/dubbo-admin-frontend/src/api/menu.js new file mode 100644 index 0000000..898c6ff --- /dev/null +++ b/dubbo-admin-frontend/src/api/menu.js @@ -0,0 +1,26 @@ +const Menu = [ + {title: 'Service Search', path: '/service', icon: 'search'}, + { + title: 'Service Governance', + icon: 'edit', + group: 'governance', + items: [ + {title: 'Routing Rule', path: '/routingRule'}, + {title: 'Dynamic Config', path: '/governance/config'}, + {title: 'Access Control', path: '/governance/access'}, + {title: 'Weight Adjust', path: '/governance/weight'}, + {title: 'Load Balance', path: '/governance/loadbalance'} + ] + }, + {title: 'QoS', path: '/qos', icon: 'computer'}, + { + title: 'Service Info', + icon: 'info', + group: 'info', + items: [ + {title: 'Version', path: '/info/version'} + ] + } +] + +export default Menu diff --git a/dubbo-admin-frontend/src/components/Drawer.vue b/dubbo-admin-frontend/src/components/Drawer.vue index b94ac75..59a72f9 100644 --- a/dubbo-admin-frontend/src/components/Drawer.vue +++ b/dubbo-admin-frontend/src/components/Drawer.vue @@ -16,9 +16,16 @@ --> <template> - <v-navigation-drawer v-model="drawer" fixed app> + <v-navigation-drawer + id="appDrawer" + :mini-variant.sync="mini" + fixed + :dark="$vuetify.dark" + app + v-model="drawer" + > - <v-toolbar color="primary"> + <v-toolbar color="primary darken-1" dark> <img src="@/assets/logo.png" width="24" height="24"/> <v-toolbar-title class="ml-0 pl-3"> <span class="hidden-sm-and-down white--text">Dubbo Admin</span> @@ -26,63 +33,53 @@ </v-toolbar> <v-list> - <v-list-tile href="/#/service"> - <v-list-tile-action> - <v-icon>search</v-icon> - </v-list-tile-action> - <v-list-tile-title>Service Search</v-list-tile-title> - </v-list-tile> + <template v-for="(item, i) in menus"> + <v-list-group v-if="item.items" :key="i" :group="item.group" :prepend-icon="item.icon" no-action> + <v-list-tile slot="activator" ripple> + <v-list-tile-content> + <v-list-tile-title>{{ item.title }}</v-list-tile-title> + </v-list-tile-content> + </v-list-tile> - <v-list-group prepend-icon="edit" value="true" no-action> - <v-list-tile slot="activator"> - <v-list-tile-title>Service Governance</v-list-tile-title> - </v-list-tile> - <v-list-tile href="/#/routingRule"> - <v-list-tile-title>Routing Rule</v-list-tile-title> - </v-list-tile> - <v-list-tile> - <v-list-tile-title>Dynamic Config</v-list-tile-title> - </v-list-tile> - <v-list-tile> - <v-list-tile-title>Access Control</v-list-tile-title> - </v-list-tile> - <v-list-tile> - <v-list-tile-title>Weight Adjust</v-list-tile-title> - </v-list-tile> - <v-list-tile> - <v-list-tile-title>Load Balance</v-list-tile-title> - </v-list-tile> - </v-list-group> - - <v-list-tile> - <v-list-tile-action> - <v-icon>computer</v-icon> - </v-list-tile-action> - <v-list-tile-title>QoS</v-list-tile-title> - </v-list-tile> + <template v-for="(subItem, i) in item.items"> + <v-list-tile :key="i" :to="subItem.path" ripple> + <v-list-tile-content> + <v-list-tile-title>{{ subItem.title }}</v-list-tile-title> + </v-list-tile-content> + </v-list-tile> + </template> + </v-list-group> - <v-list-group prepend-icon="info" value="true" no-action> - <v-list-tile slot="activator"> - <v-list-tile-title>Service Info</v-list-tile-title> + <v-list-tile v-else :key="item.title" :to="item.path" ripple="ripple"> + <v-list-tile-action> + <v-icon>{{ item.icon }}</v-icon> + </v-list-tile-action> + <v-list-tile-content>{{ item.title }}</v-list-tile-content> </v-list-tile> - <v-list-tile> - <v-list-tile-title>Version</v-list-tile-title> - </v-list-tile> - </v-list-group> + </template> </v-list> </v-navigation-drawer> </template> <script> + import menu from '@/api/menu' + export default { name: 'drawer', data: () => ({ - drawer: true + mini: false, + drawer: true, + menus: menu }), created () { window.getApp.$on('DRAWER_TOGGLED', () => { this.drawer = (!this.drawer) }) + }, + computed: { + sideToolbarColor () { + return this.$vuetify.options.extra.sideNav + } } } </script>