You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dubbo.apache.org by il...@apache.org on 2018/09/11 07:12:10 UTC
[incubator-dubbo-ops] branch develop updated: update drawer
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 <ia...@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>