Domů Procházet Nápověda
Registrovat se Přihlásit se
Gamble
/
GambleAdmin
Sledovat 5
Oblíbit 0
Rozštěpit 0
Zdrojový kód Úkoly 0 Požadavky na natažení 0 Revize 361 Vydání 2 Wiki
Procházet zdrojové kódy

Merge commit 'bb0b37e0ebb21515eabdd181b404a62c9b222815'

# Conflicts:
#	src/api/login.js
#	src/views/dashboard/index.vue
#	src/views/table/index.vue
EthnaYeh %!s(int64=7) %!d(string=před) roky
rodič
7958b28bae bb0b37e0eb
revize
81f42a4de1
65 změnil soubory, kde provedl 705 přidání a 451 odebrání
Rozdělené zobrazení Ukázat statistiku rozdílových dat
  1. 1 0
      .gitignore
  2. 0 3
      README-zh.md
  3. 0 3
      README.md
  4. binární
      favicon.ico
  5. 1 1
      index.html
  6. 47 47
      package.json
  7. 7 1
      src/api/login.js
  8. 2 2
      src/api/table.js
  9. 51 0
      src/components/Breadcrumb/index.vue
  10. 0 22
      src/components/Icon-svg/index.vue
  11. 56 0
      src/components/ScrollBar/index.vue
  12. 42 0
      src/components/SvgIcon/index.vue
  13. 2 2
      src/icons/index.js
  14. 0 1
      src/icons/svg/404.svg
  15. 0 1
      src/icons/svg/EXCEL.svg
  16. 0 1
      src/icons/svg/QQ.svg
  17. 0 1
      src/icons/svg/a.svg
  18. 0 1
      src/icons/svg/b.svg
  19. 0 1
      src/icons/svg/bug.svg
  20. 0 1
      src/icons/svg/c.svg
  21. 0 1
      src/icons/svg/email.svg
  22. 1 0
      src/icons/svg/example.svg
  23. 0 0
      src/icons/svg/eye.svg
  24. 1 0
      src/icons/svg/form.svg
  25. 0 1
      src/icons/svg/from.svg
  26. 0 1
      src/icons/svg/icons.svg
  27. 0 0
      src/icons/svg/password.svg
  28. 0 1
      src/icons/svg/quanxian.svg
  29. 0 1
      src/icons/svg/shouce.svg
  30. 0 1
      src/icons/svg/tab.svg
  31. 1 1
      src/icons/svg/table.svg
  32. 0 1
      src/icons/svg/theme.svg
  33. 1 0
      src/icons/svg/tree.svg
  34. 0 1
      src/icons/svg/tubiao.svg
  35. 0 1
      src/icons/svg/tuozhuai.svg
  36. 0 0
      src/icons/svg/user.svg
  37. 0 1
      src/icons/svg/weixin.svg
  38. 0 1
      src/icons/svg/wujiaoxing.svg
  39. 0 1
      src/icons/svg/xinrenzhinan.svg
  40. 0 1
      src/icons/svg/zonghe.svg
  41. 0 1
      src/icons/svg/zujian.svg
  42. 1 1
      src/main.js
  43. 40 18
      src/router/index.js
  44. 9 21
      src/styles/index.scss
  45. 100 0
      src/styles/sidebar.scss
  46. 32 0
      src/styles/transition.scss
  47. 4 0
      src/styles/variables.scss
  48. 0 0
      src/utils/request.js
  49. 1 1
      src/views/404.vue
  50. 3 2
      src/views/dashboard/index.vue
  51. 15 2
      src/views/page/form.vue
  52. 0 18
      src/views/layout/AppMain.vue
  53. 9 53
      src/views/layout/Layout.vue
  54. 0 49
      src/views/layout/Levelbar.vue
  55. 0 97
      src/views/layout/Navbar.vue
  56. 0 23
      src/views/layout/Sidebar.vue
  57. 0 46
      src/views/layout/SidebarItem.vue
  58. 19 0
      src/views/layout/components/AppMain.vue
  59. 94 0
      src/views/layout/components/Navbar.vue
  60. 43 0
      src/views/layout/components/Sidebar/SidebarItem.vue
  61. 28 0
      src/views/layout/components/Sidebar/index.vue
  62. 0 4
      src/views/layout/index.js
  63. 15 5
      src/views/login/index.vue
  64. 8 8
      src/views/table/index.vue
  65. 71 0
      src/views/tree/index.vue

+ 1 - 0
.gitignore
Zobrazit soubor 

@@ -4,3 +4,4 @@ dist/
4 4 
 npm-debug.log*
5 5 
 yarn-debug.log*
6 6 
 yarn-error.log*
7 
+package-lock.json

+ 0 - 3
README-zh.md
Zobrazit soubor 

@@ -3,9 +3,6 @@
3 3 
 > 这是一个 极简的vue admin 管理后台 它只包含了 Element UI & axios & iconfont & permission control & lint，这些搭建后台必要的东西。
4 4
5 5 
 [线上地址](http://panjiachen.github.io/vueAdmin-template)
6 
-<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/vMACqConzRGb2TuXvYSosXpP/PanJiaChen/vueAdmin-template'>
7 
-  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/vMACqConzRGb2TuXvYSosXpP/PanJiaChen/vueAdmin-template.svg' />
8 
-</a>
9 6
10 7 
 ## Extra
11 8 
 如果你想要根据用户角色来动态生成侧边栏和router，你可以使用改分支[permission-control](https://github.com/PanJiaChen/vueAdmin-template/tree/permission-control)

+ 0 - 3
README.md
Zobrazit soubor 

@@ -5,9 +5,6 @@
5 5 
 **Live demo:** http://panjiachen.github.io/vueAdmin-template
6 6
7 7 
 [中文文档](https://github.com/PanJiaChen/vueAdmin-template/blob/master/README-zh.md)
8 
-<a target='_blank' rel='nofollow' href='https://app.codesponsor.io/link/vMACqConzRGb2TuXvYSosXpP/PanJiaChen/vueAdmin-template'>
9 
-  <img alt='Sponsor' width='888' height='68' src='https://app.codesponsor.io/embed/vMACqConzRGb2TuXvYSosXpP/PanJiaChen/vueAdmin-template.svg' />
10 
-</a>
11 8
12 9 
 ## Build Setup
13 10

binární
favicon.ico
Zobrazit soubor


+ 1 - 1
index.html
Zobrazit soubor 

@@ -2,7 +2,7 @@
2 2 
 <html>
3 3 
   <head>
4 4 
     <meta charset="utf-8">
5 
-    <title>vue-admin</title>
5 
+    <title>vue-admin-template</title>
6 6 
   </head>
7 7 
   <body>
8 8 
     <div id="app"></div>

+ 47 - 47
package.json
Zobrazit soubor 

@@ -1,6 +1,6 @@
1 1 
 {
2 2 
   "name": "vue-admin-template",
3 
-  "version": "1.0.0",
3 
+  "version": "3.0.0",
4 4 
   "license": "MIT",
5 5 
   "description": "GambleAdmin",
6 6 
   "author": "EthanYeh",
 
@@ -11,57 +11,57 @@
11 11 
     "lint": "eslint --ext .js,.vue src"
12 12 
   },
13 13 
   "dependencies": {
14 
-    "axios": "0.16.2",
15 
-    "element-ui": "1.4.3",
16 
-    "js-cookie": "2.1.4",
14 
+    "axios": "0.17.1",
15 
+    "element-ui": "2.0.5",
16 
+    "js-cookie": "2.2.0",
17 17 
     "normalize.css": "7.0.0",
18 18 
     "nprogress": "0.2.0",
19 
-    "vue": "2.4.2",
20 
-    "vue-router": "2.7.0",
21 
-    "vuex": "2.3.1"
19 
+    "vue": "2.5.9",
20 
+    "vue-router": "3.0.1",
21 
+    "vuex": "3.0.1"
22 22 
   },
23 23 
   "devDependencies": {
24 
-    "autoprefixer": "6.7.2",
25 
-    "babel-core": "6.22.1",
26 
-    "babel-eslint": "7.1.1",
27 
-    "babel-loader": "6.2.10",
28 
-    "babel-plugin-transform-runtime": "6.22.0",
29 
-    "babel-preset-env": "1.3.2",
30 
-    "babel-preset-stage-2": "6.22.0",
31 
-    "babel-register": "6.22.0",
32 
-    "chalk": "1.1.3",
33 
-    "connect-history-api-fallback": "1.3.0",
34 
-    "copy-webpack-plugin": "4.0.1",
35 
-    "css-loader": "0.28.0",
36 
-    "eslint": "3.19.0",
37 
-    "eslint-friendly-formatter": "2.0.7",
38 
-    "eslint-loader": "1.7.1",
39 
-    "eslint-plugin-html": "2.0.0",
24 
+    "autoprefixer": "7.1.6",
25 
+    "babel-core": "6.26.0",
26 
+    "babel-eslint": "8.0.2",
27 
+    "babel-loader": "7.1.2",
28 
+    "babel-plugin-transform-runtime": "6.23.0",
29 
+    "babel-preset-env": "1.6.1",
30 
+    "babel-preset-stage-2": "6.24.1",
31 
+    "babel-register": "6.26.0",
32 
+    "chalk": "2.3.0",
33 
+    "connect-history-api-fallback": "1.5.0",
34 
+    "copy-webpack-plugin": "4.2.3",
35 
+    "css-loader": "0.28.7",
36 
+    "eslint": "4.11.0",
37 
+    "eslint-friendly-formatter": "3.0.0",
38 
+    "eslint-loader": "1.9.0",
39 
+    "eslint-plugin-html": "4.0.1",
40 40 
     "eventsource-polyfill": "0.9.6",
41 
-    "express": "4.14.1",
42 
-    "extract-text-webpack-plugin": "2.0.0",
43 
-    "file-loader": "0.11.1",
44 
-    "friendly-errors-webpack-plugin": "1.1.3",
45 
-    "html-webpack-plugin": "2.28.0",
46 
-    "http-proxy-middleware": "0.17.3",
47 
-    "webpack-bundle-analyzer": "2.2.1",
48 
-    "semver": "5.3.0",
49 
-    "shelljs": "0.7.6",
50 
-    "opn": "4.0.2",
51 
-    "optimize-css-assets-webpack-plugin": "1.3.0",
52 
-    "ora": "1.2.0",
53 
-    "rimraf": "2.6.0",
54 
-    "node-sass": "^4.5.0",
55 
-    "sass-loader": "6.0.5",
56 
-    "svg-sprite-loader": "3.2.4",
57 
-    "url-loader": "0.5.8",
58 
-    "vue-loader": "13.0.4",
59 
-    "vue-style-loader": "3.0.1",
60 
-    "vue-template-compiler": "2.4.2",
61 
-    "webpack": "2.6.1",
62 
-    "webpack-dev-middleware": "1.10.0",
63 
-    "webpack-hot-middleware": "2.18.0",
64 
-    "webpack-merge": "4.1.0"
41 
+    "express": "4.16.2",
42 
+    "extract-text-webpack-plugin": "3.0.2",
43 
+    "file-loader": "1.1.5",
44 
+    "friendly-errors-webpack-plugin": "1.6.1",
45 
+    "html-webpack-plugin": "2.30.1",
46 
+    "http-proxy-middleware": "0.17.4",
47 
+    "node-sass": "^4.7.2",
48 
+    "opn": "5.1.0",
49 
+    "optimize-css-assets-webpack-plugin": "3.2.0",
50 
+    "ora": "1.3.0",
51 
+    "rimraf": "2.6.2",
52 
+    "sass-loader": "6.0.6",
53 
+    "semver": "5.4.1",
54 
+    "shelljs": "0.7.8",
55 
+    "svg-sprite-loader": "3.4.1",
56 
+    "url-loader": "0.6.1",
57 
+    "vue-loader": "13.5.0",
58 
+    "vue-style-loader": "3.0.3",
59 
+    "vue-template-compiler": "2.5.9",
60 
+    "webpack": "3.8.1",
61 
+    "webpack-bundle-analyzer": "2.9.1",
62 
+    "webpack-dev-middleware": "1.12.1",
63 
+    "webpack-hot-middleware": "2.20.0",
64 
+    "webpack-merge": "4.1.1"
65 65 
   },
66 66 
   "engines": {
67 67 
     "node": ">= 4.0.0",

+ 7 - 1
src/api/login.js
Zobrazit soubor 

@@ -1,4 +1,4 @@
1 
-import fetch from '@/utils/fetch'
1 
+import request from '@/utils/request'
2 2
3 3 
 export function login(username, password) {
4 4 
   return fetch({
 
@@ -27,3 +27,9 @@ export function getInfo(token) {
27 27 
 // }
28 28
29 29 
 // chage password
30 
+export function logout() {
31 
+  return request({
32 
+    url: '/user/logout',
33 
+    method: 'post'
34 
+  })
35 
+}

+ 2 - 2
src/api/table.js
Zobrazit soubor 

@@ -1,7 +1,7 @@
1 
-import fetch from '@/utils/fetch'
1 
+import request from '@/utils/request'
2 2
3 3 
 export function getList(params) {
4 
-  return fetch({
4 
+  return request({
5 5 
     url: '/table/list',
6 6 
     method: 'get',
7 7 
     params

+ 51 - 0
src/components/Breadcrumb/index.vue
Zobrazit soubor 

@@ -0,0 +1,51 @@
1 
+<template>
2 
+  <el-breadcrumb class="app-breadcrumb" separator="/">
3 
+    <transition-group name="breadcrumb">
4 
+      <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path" v-if="item.meta.title">
5 
+        <span v-if="item.redirect==='noredirect'||index==levelList.length-1" class="no-redirect">{{item.meta.title}}</span>
6 
+        <router-link v-else :to="item.redirect||item.path">{{item.meta.title}}</router-link>
7 
+      </el-breadcrumb-item>
8 
+    </transition-group>
9 
+  </el-breadcrumb>
10 
+</template>
11 
+
12 
+<script>
13 
+export default {
14 
+  created() {
15 
+    this.getBreadcrumb()
16 
+  },
17 
+  data() {
18 
+    return {
19 
+      levelList: null
20 
+    }
21 
+  },
22 
+  watch: {
23 
+    $route() {
24 
+      this.getBreadcrumb()
25 
+    }
26 
+  },
27 
+  methods: {
28 
+    getBreadcrumb() {
29 
+      let matched = this.$route.matched.filter(item => item.name)
30 
+      const first = matched[0]
31 
+      if (first && first.name !== 'dashboard') {
32 
+        matched = [{ path: '/dashboard', meta: { title: 'Dashboard' }}].concat(matched)
33 
+      }
34 
+      this.levelList = matched
35 
+    }
36 
+  }
37 
+}
38 
+</script>
39 
+
40 
+<style rel="stylesheet/scss" lang="scss" scoped>
41 
+  .app-breadcrumb.el-breadcrumb {
42 
+    display: inline-block;
43 
+    font-size: 14px;
44 
+    line-height: 50px;
45 
+    margin-left: 10px;
46 
+    .no-redirect {
47 
+      color: #97a8be;
48 
+      cursor: text;
49 
+    }
50 
+  }
51 
+</style>

+ 0 - 22
src/components/Icon-svg/index.vue
Zobrazit soubor 

@@ -1,22 +0,0 @@
1 
-<template>
2 
-  <svg class="svg-icon" aria-hidden="true">
3 
-    <use :xlink:href="iconName"></use>
4 
-  </svg>
5 
-</template>
6 
-
7 
-<script>
8 
-  export default {
9 
-    name: 'icon-svg',
10 
-    props: {
11 
-      iconClass: {
12 
-        type: String,
13 
-        required: true
14 
-      }
15 
-    },
16 
-    computed: {
17 
-      iconName() {
18 
-        return `#icon-${this.iconClass}`
19 
-      }
20 
-    }
21 
-  }
22 
-</script>

+ 56 - 0
src/components/ScrollBar/index.vue
Zobrazit soubor 

@@ -0,0 +1,56 @@
1 
+<template>
2 
+  <div class="scroll-container" ref="scrollContainer" @mousewheel="handleScroll">
3 
+    <div class="scroll-wrapper" ref="scrollWrapper" :style="{top: top + 'px'}">
4 
+      <slot></slot>
5 
+    </div>
6 
+  </div>
7 
+</template>
8 
+
9 
+<script>
10 
+const delta = 15
11 
+export default {
12 
+  name: 'scrollBar',
13 
+  data() {
14 
+    return {
15 
+      top: 0
16 
+    }
17 
+  },
18 
+  methods: {
19 
+    handleScroll(e) {
20 
+      e.preventDefault()
21 
+      const $container = this.$refs.scrollContainer
22 
+      const $containerHeight = $container.offsetHeight
23 
+      const $wrapper = this.$refs.scrollWrapper
24 
+      const $wrapperHeight = $wrapper.offsetHeight
25 
+      if (e.wheelDelta > 0) {
26 
+        this.top = Math.min(0, this.top + e.wheelDelta)
27 
+      } else {
28 
+        if ($containerHeight - delta < $wrapperHeight) {
29 
+          if (this.top < -($wrapperHeight - $containerHeight + delta)) {
30 
+            this.top = this.top
31 
+          } else {
32 
+            this.top = Math.max(this.top + e.wheelDelta, $containerHeight - $wrapperHeight - delta)
33 
+          }
34 
+        } else {
35 
+          this.top = 0
36 
+        }
37 
+      }
38 
+    }
39 
+  }
40 
+}
41 
+</script>
42 
+
43 
+<style rel="stylesheet/scss" lang="scss" scoped>
44 
+@import '../../styles/variables.scss';
45 
+
46 
+.scroll-container {
47 
+  position: relative;
48 
+  width: 100%;
49 
+  height: 100%;
50 
+  background-color: $menuBg;
51 
+  .scroll-wrapper {
52 
+    position: absolute;
53 
+     width: 100%!important;
54 
+  }
55 
+}
56 
+</style>

+ 42 - 0
src/components/SvgIcon/index.vue
Zobrazit soubor 

@@ -0,0 +1,42 @@
1 
+<template>
2 
+  <svg :class="svgClass" aria-hidden="true">
3 
+    <use :xlink:href="iconName"></use>
4 
+  </svg>
5 
+</template>
6 
+
7 
+<script>
8 
+export default {
9 
+  name: 'svg-icon',
10 
+  props: {
11 
+    iconClass: {
12 
+      type: String,
13 
+      required: true
14 
+    },
15 
+    className: {
16 
+      type: String
17 
+    }
18 
+  },
19 
+  computed: {
20 
+    iconName() {
21 
+      return `#icon-${this.iconClass}`
22 
+    },
23 
+    svgClass() {
24 
+      if (this.className) {
25 
+        return 'svg-icon ' + this.className
26 
+      } else {
27 
+        return 'svg-icon'
28 
+      }
29 
+    }
30 
+  }
31 
+}
32 
+</script>
33 
+
34 
+<style scoped>
35 
+.svg-icon {
36 
+  width: 1em;
37 
+  height: 1em;
38 
+  vertical-align: -0.15em;
39 
+  fill: currentColor;
40 
+  overflow: hidden;
41 
+}
42 
+</style>

+ 2 - 2
src/icons/index.js
Zobrazit soubor 

@@ -1,8 +1,8 @@
1 1 
 import Vue from 'vue'
2 
-import IconSvg from '@/components/Icon-svg'// svg组件
2 
+import SvgIcon from '@/components/SvgIcon'// svg组件
3 3
4 4 
 // register globally
5 
-Vue.component('icon-svg', IconSvg)
5 
+Vue.component('svg-icon', SvgIcon)
6 6
7 7 
 const requireAll = requireContext => requireContext.keys().map(requireContext)
8 8 
 const req = require.context('./svg', false, /\.svg$/)

File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/404.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/EXCEL.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/QQ.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/a.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/b.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/bug.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/c.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/email.svg


File diff suppressed because it is too large
+ 1 - 0
src/icons/svg/example.svg


src/icons/svg/yanjing.svg → src/icons/svg/eye.svg
Zobrazit soubor


File diff suppressed because it is too large
+ 1 - 0
src/icons/svg/form.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/from.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/icons.svg


src/icons/svg/mima.svg → src/icons/svg/password.svg
Zobrazit soubor


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/quanxian.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/shouce.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/tab.svg


File diff suppressed because it is too large
+ 1 - 1
src/icons/svg/table.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/theme.svg


File diff suppressed because it is too large
+ 1 - 0
src/icons/svg/tree.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/tubiao.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/tuozhuai.svg


src/icons/svg/yonghuming.svg → src/icons/svg/user.svg
Zobrazit soubor


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/weixin.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/wujiaoxing.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/xinrenzhinan.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/zonghe.svg


File diff suppressed because it is too large
+ 0 - 1
src/icons/svg/zujian.svg


+ 1 - 1
src/main.js
Zobrazit soubor 

@@ -1,6 +1,6 @@
1 1 
 import Vue from 'vue'
2 2 
 import ElementUI from 'element-ui'
3 
-import 'element-ui/lib/theme-default/index.css'
3 
+import 'element-ui/lib/theme-chalk/index.css'
4 4 
 import locale from 'element-ui/lib/locale/lang/en'
5 5 
 import App from './App'
6 6 
 import router from './router'

+ 40 - 18
src/router/index.js
Zobrazit soubor 

@@ -1,50 +1,72 @@
1 1 
 import Vue from 'vue'
2 2 
 import Router from 'vue-router'
3 3 
 const _import = require('./_import_' + process.env.NODE_ENV)
4 
-// in development env not use Lazy Loading,because Lazy Loading too many pages will cause webpack hot update too slow.so only in production use Lazy Loading
5 
-
6 
-/* layout */
7 
-import Layout from '../views/layout/Layout'
4 
+// in development-env not use lazy-loading, because lazy-loading too many pages will cause webpack hot update too slow. so only in production use lazy-loading;
5 
+// detail: https://panjiachen.github.io/vue-element-admin-site/#/lazy-loading
8 6
9 7 
 Vue.use(Router)
10 8
9 
+/* Layout */
10 
+import Layout from '../views/layout/Layout'
11 
+
11 12 
 /**
12 
-* icon : the icon show in the sidebar
13 
-* hidden : if `hidden:true` will not show in the sidebar
14 
-* redirect : if `redirect:noredirect` will not redirct in the levelbar
15 
-* noDropdown : if `noDropdown:true` will not has submenu in the sidebar
16 
-* meta : `{ role: ['admin'] }`  will control the page role
13 
+* hidden: true                   if `hidden:true` will not show in the sidebar(default is false)
14 
+* redirect: noredirect           if `redirect:noredirect` will no redirct in the breadcrumb
15 
+* name:'router-name'             the name is used by <keep-alive> (must set!!!)
16 
+* meta : {
17 
+    title: 'title'               the name show in submenu and breadcrumb (recommend set)
18 
+    icon: 'svg-name'             the icon show in the sidebar,
19 
+  }
17 20 
 **/
18 21 
 export const constantRouterMap = [
19 22 
   { path: '/login', component: _import('login/index'), hidden: true },
20 23 
   { path: '/404', component: _import('404'), hidden: true },
24 
+
21 25 
   {
22 26 
     path: '/',
23 27 
     component: Layout,
24 28 
     redirect: '/dashboard',
25 29 
     name: 'Dashboard',
26 30 
     hidden: true,
27 
-    children: [{ path: 'dashboard', component: _import('dashboard/index') }]
31 
+    children: [{
32 
+      path: 'dashboard',
33 
+      component: _import('dashboard/index')
34 
+    }]
28 35 
   },
29 36
30 37 
   {
31 38 
     path: '/example',
32 39 
     component: Layout,
33 
-    redirect: 'noredirect',
40 
+    redirect: '/example/table',
34 41 
     name: 'Example',
35 
-    icon: 'zujian',
42 
+    meta: { title: 'Example', icon: 'example' },
36 43 
     children: [
37 
-      { path: 'index', name: 'Form', icon: 'zonghe', component: _import('page/form') }
44 
+      {
45 
+        path: 'table',
46 
+        name: 'Table',
47 
+        component: _import('table/index'),
48 
+        meta: { title: 'Table', icon: 'table' }
49 
+      },
50 
+      {
51 
+        path: 'tree',
52 
+        name: 'Tree',
53 
+        component: _import('tree/index'),
54 
+        meta: { title: 'Tree', icon: 'tree' }
55 
+      }
38 56 
     ]
39 57 
   },
40 58
41 59 
   {
42 
-    path: '/table',
60 
+    path: '/form',
43 61 
     component: Layout,
44 
-    redirect: '/table/index',
45 
-    icon: 'tubiao',
46 
-    noDropdown: true,
47 
-    children: [{ path: 'index', name: 'Table', component: _import('table/index'), meta: { role: ['admin'] }}]
62 
+    children: [
63 
+      {
64 
+        path: 'index',
65 
+        name: 'Form',
66 
+        component: _import('form/index'),
67 
+        meta: { title: 'Form', icon: 'form' }
68 
+      }
69 
+    ]
48 70 
   },
49 71
50 72 
   { path: '*', redirect: '/404', hidden: true }

+ 9 - 21
src/styles/index.scss
Zobrazit soubor 

@@ -1,5 +1,9 @@
1 
-@import './element-ui.scss';
1 
+@import './variables.scss';
2 2 
 @import './mixin.scss';
3 
+@import './transition.scss';
4 
+@import './element-ui.scss';
5 
+@import './sidebar.scss';
6 
+
3 7 
 body {
4 8 
   -moz-osx-font-smoothing: grayscale;
5 9 
   -webkit-font-smoothing: antialiased;
 
@@ -17,6 +21,10 @@ html {
17 21 
   box-sizing: inherit;
18 22 
 }
19 23
24 
+div:focus{
25 
+  outline: none;
26 
+}
27 
+
20 28 
 a:focus,
21 29 
 a:active {
22 30 
   outline: none;
 
@@ -41,17 +49,6 @@ a:hover {
41 49 
   }
42 50 
 }
43 51
44 
-//vue router transition css
45 
-.fade-enter-active,
46 
-.fade-leave-active {
47 
-  transition: all .2s ease
48 
-}
49 
-
50 
-.fade-enter,
51 
-.fade-leave-active {
52 
-  opacity: 0;
53 
-}
54 
-
55 52 
 //main-container全局样式
56 53 
 .app-main{
57 54 
   min-height: 100%
 
@@ -60,12 +57,3 @@ a:hover {
60 57 
 .app-container {
61 58 
   padding: 20px;
62 59 
 }
63 
-
64 
-.svg-icon {
65 
-  width: 1em;
66 
-  height: 1em;
67 
-  vertical-align: -0.15em;
68 
-  fill: currentColor;
69 
-  overflow: hidden;
70 
-}
71 
-

+ 100 - 0
src/styles/sidebar.scss
Zobrazit soubor 

@@ -0,0 +1,100 @@
1 
+#app {
2 
+  // 主体区域
3 
+  .main-container {
4 
+    min-height: 100%;
5 
+    transition: margin-left 0.28s;
6 
+    margin-left: 180px;
7 
+  } // 侧边栏
8 
+  .sidebar-container {
9 
+    transition: width 0.28s;
10 
+    width: 180px!important;
11 
+    height: 100%;
12 
+    position: fixed;
13 
+    top: 0;
14 
+    bottom: 0;
15 
+    left: 0;
16 
+    z-index: 1001;
17 
+    a {
18 
+      display: inline-block;
19 
+      width: 100%;
20 
+    }
21 
+    .svg-icon {
22 
+      margin-right: 16px;
23 
+    }
24 
+    .el-menu {
25 
+      border: none;
26 
+      width: 100%;
27 
+    }
28 
+  }
29 
+  .hideSidebar {
30 
+    .sidebar-container,.sidebar-container .el-menu {
31 
+      width: 36px!important;
32 
+      // overflow: inherit;
33 
+    }
34 
+    .main-container {
35 
+      margin-left: 36px;
36 
+    }
37 
+  }
38 
+  .hideSidebar {
39 
+    .submenu-title-noDropdown {
40 
+      padding-left: 10px!important;
41 
+      position: relative;
42 
+      span {
43 
+        height: 0;
44 
+        width: 0;
45 
+        overflow: hidden;
46 
+        visibility: hidden;
47 
+        transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
48 
+        opacity: 0;
49 
+        display: inline-block;
50 
+      }
51 
+      &:hover {
52 
+        span {
53 
+          display: block;
54 
+          border-radius: 3px;
55 
+          z-index: 1002;
56 
+          width: 140px;
57 
+          height: 56px;
58 
+          visibility: visible;
59 
+          position: absolute;
60 
+          right: -145px;
61 
+          text-align: left;
62 
+          text-indent: 20px;
63 
+          top: 0px;
64 
+          background-color: $subMenuBg!important;
65 
+          opacity: 1;
66 
+        }
67 
+      }
68 
+    }
69 
+    .el-submenu {
70 
+      &>.el-submenu__title {
71 
+        padding-left: 10px!important;
72 
+        &>span {
73 
+          display: none;
74 
+        }
75 
+        .el-submenu__icon-arrow {
76 
+          display: none;
77 
+        }
78 
+      }
79 
+      .nest-menu {
80 
+        .el-submenu__icon-arrow {
81 
+          display: block!important;
82 
+        }
83 
+        span {
84 
+          display: inline-block!important;
85 
+        }
86 
+      }
87 
+    }
88 
+  }
89 
+  .nest-menu .el-submenu>.el-submenu__title,
90 
+  .el-submenu .el-menu-item {
91 
+    min-width: 180px!important;
92 
+    background-color: $subMenuBg!important;
93 
+    &:hover {
94 
+      background-color: $menuHover!important;
95 
+    }
96 
+  }
97 
+  .el-menu--collapse .el-menu .el-submenu{
98 
+    min-width: 180px!important;
99 
+  }
100 
+}

+ 32 - 0
src/styles/transition.scss
Zobrazit soubor 

@@ -0,0 +1,32 @@
1 
+//globl transition css
2 
+
3 
+/*fade*/
4 
+.fade-enter-active,
5 
+.fade-leave-active {
6 
+  transition: opacity 0.28s;
7 
+}
8 
+
9 
+.fade-enter,
10 
+.fade-leave-active {
11 
+  opacity: 0;
12 
+}
13 
+
14 
+/*fade*/
15 
+.breadcrumb-enter-active,
16 
+.breadcrumb-leave-active {
17 
+  transition: all .5s;
18 
+}
19 
+
20 
+.breadcrumb-enter,
21 
+.breadcrumb-leave-active {
22 
+  opacity: 0;
23 
+  transform: translateX(20px);
24 
+}
25 
+
26 
+.breadcrumb-move {
27 
+  transition: all .5s;
28 
+}
29 
+
30 
+.breadcrumb-leave-active {
31 
+  position: absolute;
32 
+}

+ 4 - 0
src/styles/variables.scss
Zobrazit soubor 

@@ -0,0 +1,4 @@
1 
+//sidebar
2 
+$menuBg:#304156;
3 
+$subMenuBg:#1f2d3d;
4 
+$menuHover:#001528;

src/utils/fetch.js → src/utils/request.js
Zobrazit soubor


+ 1 - 1
src/views/404.vue
Zobrazit soubor 

@@ -9,7 +9,7 @@
9 9 
       </div>
10 10 
       <div class="bullshit">
11 11 
         <div class="bullshit__oops">OOPS!</div>
12 
-        <div class="bullshit__info">版权所有<a class='link-type' href='https://wallstreetcn.com' target='_blank'>华尔街见闻</a></div>
12 
+        <div class="bullshit__info">版权所有<a class="link-type" href="https://wallstreetcn.com" target='_blank'>华尔街见闻</a></div>
13 13 
         <div class="bullshit__headline">{{ message }}</div>
14 14 
         <div class="bullshit__info">请检查您输入的网址是否正确，请点击以下按钮返回主页或者发送错误报告</div>
15 15 
         <a href="/" class="bullshit__return-home">返回首页</a>

+ 3 - 2
src/views/dashboard/index.vue
Zobrazit soubor 

@@ -1,12 +1,13 @@
1 1 
 <template>
2 2 
   <div class="dashboard-container">
3 
-    <div class='dashboard-text'>username:{{username}}</div>
4 
-    <div class='dashboard-text'>role:<span v-for='role in roles' :key='role'>{{role}}</span></div>
3 
+    <div class="dashboard-text">name:{{name}}</div>
4 
+    <div class="dashboard-text">role:<span v-for='role in roles' :key='role'>{{role}}</span></div>
5 5 
   </div>
6 6 
 </template>
7 7
8 8 
 <script>
9 9 
 import { mapGetters } from 'vuex'
10 
+
10 11 
 export default {
11 12 
   name: 'dashboard',
12 13 
   computed: {

+ 15 - 2
src/views/page/form.vue
Zobrazit soubor 

@@ -20,7 +20,7 @@
20 20 
         </el-col>
21 21 
       </el-form-item>
22 22 
       <el-form-item label="Instant delivery">
23 
-        <el-switch on-text="" off-text="" v-model="form.delivery"></el-switch>
23 
+        <el-switch v-model="form.delivery"></el-switch>
24 24 
       </el-form-item>
25 25 
       <el-form-item label="Activity type">
26 26 
         <el-checkbox-group v-model="form.type">
 
@@ -41,7 +41,7 @@
41 41 
       </el-form-item>
42 42 
       <el-form-item>
43 43 
         <el-button type="primary" @click="onSubmit">Create</el-button>
44 
-        <el-button>Cancel</el-button>
44 
+        <el-button @click="onCancel">Cancel</el-button>
45 45 
       </el-form-item>
46 46 
     </el-form>
47 47 
   </div>
 
@@ -66,7 +66,20 @@ export default {
66 66 
   methods: {
67 67 
     onSubmit() {
68 68 
       this.$message('submit!')
69 
+    },
70 
+    onCancel() {
71 
+      this.$message({
72 
+        message: 'cancel!',
73 
+        type: 'warning'
74 
+      })
69 75 
     }
70 76 
   }
71 77 
 }
72 78 
 </script>
79 
+
80 
+<style scoped>
81 
+.line{
82 
+  text-align: center;
83 
+}
84 
+</style>
85 
+

+ 0 - 18
src/views/layout/AppMain.vue
Zobrazit soubor 

@@ -1,18 +0,0 @@
1 
-<template>
2 
-  <section class="app-main">
3 
-    <transition name="fade" mode="out-in">
4 
-      <router-view :key="key"></router-view>
5 
-    </transition>
6 
-  </section>
7 
-</template>
8 
-
9 
-<script>
10 
-export default {
11 
-  name: 'AppMain',
12 
-  computed: {
13 
-    key() {
14 
-      return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
15 
-    }
16 
-  }
17 
-}
18 
-</script>

+ 9 - 53
src/views/layout/Layout.vue
Zobrazit soubor 

@@ -1,8 +1,6 @@
1 1 
 <template>
2 2 
   <div class="app-wrapper" :class="{hideSidebar:!sidebar.opened}">
3 
-    <div class="sidebar-wrapper">
4 
-      <sidebar class="sidebar-container"></sidebar>
5 
-    </div>
3 
+    <sidebar class="sidebar-container"></sidebar>
6 4 
     <div class="main-container">
7 5 
       <navbar></navbar>
8 6 
       <app-main></app-main>
 
@@ -10,9 +8,8 @@
10 8 
   </div>
11 9 
 </template>
12 10
13 
-
14 11 
 <script>
15 
-import { Navbar, Sidebar, AppMain } from '@/views/layout'
12 
+import { Navbar, Sidebar, AppMain } from '@/views/layout/components'
16 13
17 14 
 export default {
18 15 
   name: 'layout',
 
@@ -30,52 +27,11 @@ export default {
30 27 
 </script>
31 28
32 29 
 <style rel="stylesheet/scss" lang="scss" scoped>
33 
-    @import "src/styles/mixin.scss";
34 
-    .app-wrapper {
35 
-        @include clearfix;
36 
-        position: relative;
37 
-        height: 100%;
38 
-        width: 100%;
39 
-        &.hideSidebar {
40 
-            .sidebar-wrapper {
41 
-                transform: translate(-140px, 0);
42 
-                .sidebar-container {
43 
-                    transform: translate(132px, 0);
44 
-                }
45 
-                &:hover {
46 
-                    transform: translate(0, 0);
47 
-                    .sidebar-container {
48 
-                        transform: translate(0, 0);
49 
-                    }
50 
-                }
51 
-            }
52 
-            .main-container {
53 
-                margin-left: 40px;
54 
-            }
55 
-        }
56 
-        .sidebar-wrapper {
57 
-            width: 180px;
58 
-            position: fixed;
59 
-            top: 0;
60 
-            bottom: 0;
61 
-            left: 0;
62 
-            z-index: 1001;
63 
-            overflow: hidden;
64 
-            transition: all .28s ease-out;
65 
-        }
66 
-        .sidebar-container {
67 
-            transition: all .28s ease-out;
68 
-            position: absolute;
69 
-            top: 0;
70 
-            bottom: 0;
71 
-            left: 0;
72 
-            right: -17px;
73 
-            overflow-y: scroll;
74 
-        }
75 
-        .main-container {
76 
-            min-height: 100%;
77 
-            transition: all .28s ease-out;
78 
-            margin-left: 180px;
79 
-        }
80 
-    }
30 
+@import "src/styles/mixin.scss";
31 
+.app-wrapper {
32 
+  @include clearfix;
33 
+  position: relative;
34 
+  height: 100%;
35 
+  width: 100%;
36 
+}
81 37 
 </style>

+ 0 - 49
src/views/layout/Levelbar.vue
Zobrazit soubor 

@@ -1,49 +0,0 @@
1 
-<template>
2 
-  <el-breadcrumb class="app-levelbar" separator="/">
3 
-    <el-breadcrumb-item v-for="(item,index)  in levelList" :key="item.path">
4 
-      <router-link v-if='item.redirect==="noredirect"||index==levelList.length-1' to="" class="no-redirect">{{item.name}}</router-link>
5 
-      <router-link v-else :to="item.redirect||item.path">{{item.name}}</router-link>
6 
-    </el-breadcrumb-item>
7 
-  </el-breadcrumb>
8 
-</template>
9 
-
10 
-<script>
11 
-export default {
12 
-  created() {
13 
-    this.getBreadcrumb()
14 
-  },
15 
-  data() {
16 
-    return {
17 
-      levelList: null
18 
-    }
19 
-  },
20 
-  methods: {
21 
-    getBreadcrumb() {
22 
-      let matched = this.$route.matched.filter(item => item.name)
23 
-      const first = matched[0]
24 
-      if (first && (first.name !== 'Home' || first.path !== '')) {
25 
-        matched = [{ name: 'Home', path: '/' }].concat(matched)
26 
-      }
27 
-      this.levelList = matched
28 
-    }
29 
-  },
30 
-  watch: {
31 
-    $route() {
32 
-      this.getBreadcrumb()
33 
-    }
34 
-  }
35 
-}
36 
-</script>
37 
-
38 
-<style rel="stylesheet/scss" lang="scss" scoped>
39 
-.app-levelbar.el-breadcrumb {
40 
-  display: inline-block;
41 
-  font-size: 14px;
42 
-  line-height: 50px;
43 
-  margin-left: 10px;
44 
-  .no-redirect {
45 
-    color: #97a8be;
46 
-    cursor: text;
47 
-  }
48 
-}
49 
-</style>

+ 0 - 97
src/views/layout/Navbar.vue
Zobrazit soubor 

@@ -1,97 +0,0 @@
1 
-<template>
2 
-  <el-menu class="navbar" mode="horizontal">
3 
-    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
4 
-    <levelbar></levelbar>
5 
-    <el-dropdown class="avatar-container" trigger="click">
6 
-      <div class="avatar-wrapper">
7 
-        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
8 
-        <i class="el-icon-caret-bottom"></i>
9 
-      </div>
10 
-      <el-dropdown-menu class="user-dropdown" slot="dropdown">
11 
-        <router-link class='inlineBlock' to="/">
12 
-          <el-dropdown-item>
13 
-            Home
14 
-          </el-dropdown-item>
15 
-        </router-link>
16 
-        <el-dropdown-item divided><span @click="logout" style="display:block;">LogOut</span></el-dropdown-item>
17 
-      </el-dropdown-menu>
18 
-    </el-dropdown>
19 
-  </el-menu>
20 
-</template>
21 
-
22 
-<script>
23 
-import { mapGetters } from 'vuex'
24 
-import Levelbar from './Levelbar'
25 
-import Hamburger from '@/components/Hamburger'
26 
-
27 
-export default {
28 
-  components: {
29 
-    Levelbar,
30 
-    Hamburger
31 
-  },
32 
-  computed: {
33 
-    ...mapGetters([
34 
-      'sidebar',
35 
-      'avatar'
36 
-    ])
37 
-  },
38 
-  methods: {
39 
-    toggleSideBar() {
40 
-      this.$store.dispatch('ToggleSideBar')
41 
-    },
42 
-    logout() {
43 
-      this.$store.dispatch('LogOut').then(() => {
44 
-        location.reload()  // 为了重新实例化vue-router对象 避免bug
45 
-      })
46 
-    }
47 
-  }
48 
-}
49 
-</script>
50 
-
51 
-<style rel="stylesheet/scss" lang="scss" scoped>
52 
-    .navbar {
53 
-        height: 50px;
54 
-        line-height: 50px;
55 
-        border-radius: 0px !important;
56 
-        .hamburger-container {
57 
-            line-height: 58px;
58 
-            height: 50px;
59 
-            float: left;
60 
-            padding: 0 10px;
61 
-        }
62 
-        .errLog-container {
63 
-            display: inline-block;
64 
-            position: absolute;
65 
-            right: 150px;
66 
-        }
67 
-        .screenfull {
68 
-            position: absolute;
69 
-            right: 90px;
70 
-            top: 16px;
71 
-            color: red;
72 
-        }
73 
-        .avatar-container {
74 
-            height: 50px;
75 
-            display: inline-block;
76 
-            position: absolute;
77 
-            right: 35px;
78 
-            .avatar-wrapper {
79 
-                cursor: pointer;
80 
-                margin-top: 5px;
81 
-                position: relative;
82 
-                .user-avatar {
83 
-                    width: 40px;
84 
-                    height: 40px;
85 
-                    border-radius: 10px;
86 
-                }
87 
-                .el-icon-caret-bottom {
88 
-                    position: absolute;
89 
-                    right: -20px;
90 
-                    top: 25px;
91 
-                    font-size: 12px;
92 
-                }
93 
-            }
94 
-        }
95 
-    }
96 
-</style>
97 
-

+ 0 - 23
src/views/layout/Sidebar.vue
Zobrazit soubor 

@@ -1,23 +0,0 @@
1 
-<template>
2 
-  <el-menu mode="vertical" theme="dark" :default-active="$route.path">
3 
-    <sidebar-item :routes="routes"></sidebar-item>
4 
-  </el-menu>
5 
-</template>
6 
-
7 
-<script>
8 
-import SidebarItem from './SidebarItem'
9 
-export default {
10 
-  components: { SidebarItem },
11 
-  computed: {
12 
-    routes() {
13 
-      return this.$router.options.routes
14 
-    }
15 
-  }
16 
-}
17 
-</script>
18 
-
19 
-<style rel="stylesheet/scss" lang="scss" scoped>
20 
-.el-menu {
21 
-  min-height: 100%;
22 
-}
23 
-</style>

+ 0 - 46
src/views/layout/SidebarItem.vue
Zobrazit soubor 

@@ -1,46 +0,0 @@
1 
-<template>
2 
-  <div>
3 
-    <template v-for="item in routes">
4 
-      <router-link v-if="!item.hidden&&item.noDropdown&&item.children.length>0" :to="item.path+'/'+item.children[0].path">
5 
-        <el-menu-item :index="item.path+'/'+item.children[0].path">
6 
-          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.children[0].name}}
7 
-        </el-menu-item>
8 
-      </router-link>
9 
-      <el-submenu :index="item.name" v-if="!item.noDropdown&&!item.hidden">
10 
-        <template slot="title">
11 
-          <icon-svg v-if='item.icon' :icon-class="item.icon" /> {{item.name}}
12 
-        </template>
13 
-        <template v-for="child in item.children" v-if='!child.hidden'>
14 
-          <sidebar-item class='menu-indent' v-if='child.children&&child.children.length>0' :routes='[child]'> </sidebar-item>
15 
-          <router-link v-else class="menu-indent" :to="item.path+'/'+child.path">
16 
-            <el-menu-item :index="item.path+'/'+child.path">
17 
-              {{child.name}}
18 
-            </el-menu-item>
19 
-          </router-link>
20 
-        </template>
21 
-      </el-submenu>
22 
-    </template>
23 
-  </div>
24 
-</template>
25 
-
26 
-<script>
27 
-export default {
28 
-  name: 'SidebarItem',
29 
-  props: {
30 
-    routes: {
31 
-      type: Array
32 
-    }
33 
-  }
34 
-}
35 
-</script>
36 
-
37 
-<style rel="stylesheet/scss" lang="scss" scoped>
38 
-.svg-icon {
39 
-  margin-right: 10px;
40 
-}
41 
-.hideSidebar .menu-indent{
42 
-  display: block;
43 
-  text-indent: 10px;
44 
-}
45 
-</style>
46 
-

+ 19 - 0
src/views/layout/components/AppMain.vue
Zobrazit soubor 

@@ -0,0 +1,19 @@
1 
+<template>
2 
+  <section class="app-main">
3 
+    <transition name="fade" mode="out-in">
4 
+      <!-- <router-view :key="key"></router-view> -->
5 
+      <router-view></router-view>
6 
+    </transition>
7 
+  </section>
8 
+</template>
9 
+
10 
+<script>
11 
+export default {
12 
+  name: 'AppMain',
13 
+  computed: {
14 
+    // key() {
15 
+    //   return this.$route.name !== undefined ? this.$route.name + +new Date() : this.$route + +new Date()
16 
+    // }
17 
+  }
18 
+}
19 
+</script>

+ 94 - 0
src/views/layout/components/Navbar.vue
Zobrazit soubor 

@@ -0,0 +1,94 @@
1 
+<template>
2 
+  <el-menu class="navbar" mode="horizontal">
3 
+    <hamburger class="hamburger-container" :toggleClick="toggleSideBar" :isActive="sidebar.opened"></hamburger>
4 
+    <breadcrumb></breadcrumb>
5 
+    <el-dropdown class="avatar-container" trigger="click">
6 
+      <div class="avatar-wrapper">
7 
+        <img class="user-avatar" :src="avatar+'?imageView2/1/w/80/h/80'">
8 
+        <i class="el-icon-caret-bottom"></i>
9 
+      </div>
10 
+      <el-dropdown-menu class="user-dropdown" slot="dropdown">
11 
+        <router-link class="inlineBlock" to="/">
12 
+          <el-dropdown-item>
13 
+            Home
14 
+          </el-dropdown-item>
15 
+        </router-link>
16 
+        <el-dropdown-item divided>
17 
+          <span @click="logout" style="display:block;">LogOut</span>
18 
+        </el-dropdown-item>
19 
+      </el-dropdown-menu>
20 
+    </el-dropdown>
21 
+  </el-menu>
22 
+</template>
23 
+
24 
+<script>
25 
+import { mapGetters } from 'vuex'
26 
+import Breadcrumb from '@/components/Breadcrumb'
27 
+import Hamburger from '@/components/Hamburger'
28 
+
29 
+export default {
30 
+  components: {
31 
+    Breadcrumb,
32 
+    Hamburger
33 
+  },
34 
+  computed: {
35 
+    ...mapGetters([
36 
+      'sidebar',
37 
+      'avatar'
38 
+    ])
39 
+  },
40 
+  methods: {
41 
+    toggleSideBar() {
42 
+      this.$store.dispatch('ToggleSideBar')
43 
+    },
44 
+    logout() {
45 
+      this.$store.dispatch('LogOut').then(() => {
46 
+        location.reload()  // 为了重新实例化vue-router对象 避免bug
47 
+      })
48 
+    }
49 
+  }
50 
+}
51 
+</script>
52 
+
53 
+<style rel="stylesheet/scss" lang="scss" scoped>
54 
+.navbar {
55 
+  height: 50px;
56 
+  line-height: 50px;
57 
+  border-radius: 0px !important;
58 
+  .hamburger-container {
59 
+    line-height: 58px;
60 
+    height: 50px;
61 
+    float: left;
62 
+    padding: 0 10px;
63 
+  }
64 
+  .screenfull {
65 
+    position: absolute;
66 
+    right: 90px;
67 
+    top: 16px;
68 
+    color: red;
69 
+  }
70 
+  .avatar-container {
71 
+    height: 50px;
72 
+    display: inline-block;
73 
+    position: absolute;
74 
+    right: 35px;
75 
+    .avatar-wrapper {
76 
+      cursor: pointer;
77 
+      margin-top: 5px;
78 
+      position: relative;
79 
+      .user-avatar {
80 
+        width: 40px;
81 
+        height: 40px;
82 
+        border-radius: 10px;
83 
+      }
84 
+      .el-icon-caret-bottom {
85 
+        position: absolute;
86 
+        right: -20px;
87 
+        top: 25px;
88 
+        font-size: 12px;
89 
+      }
90 
+    }
91 
+  }
92 
+}
93 
+</style>
94 
+

+ 43 - 0
src/views/layout/components/Sidebar/SidebarItem.vue
Zobrazit soubor 

@@ -0,0 +1,43 @@
1 
+<template>
2 
+  <div class="menu-wrapper">
3 
+    <template v-for="item in routes">
4 
+
5 
+      <router-link v-if="!item.hidden&&item.children&&item.children.length===1" :to="item.path+'/'+item.children[0].path" :key="item.children[0].name">
6 
+        <el-menu-item :index="item.path+'/'+item.children[0].path" class='submenu-title-noDropdown'>
7 
+          <svg-icon v-if="item.children[0].meta&&item.children[0].meta.icon" :icon-class="item.children[0].meta.icon"></svg-icon>
8 
+          <span v-if="item.children[0].meta&&item.children[0].meta.title">{{item.children[0].meta.title}}</span>
9 
+        </el-menu-item>
10 
+      </router-link>
11 
+
12 
+      <el-submenu v-if="!item.hidden&&item.children&&item.children.length>1" :index="item.name||item.path" :key="item.name">
13 
+        <template slot="title">
14 
+          <svg-icon v-if="item.meta&&item.meta.icon" :icon-class="item.meta.icon"></svg-icon>
15 
+          <span v-if="item.meta&&item.meta.title">{{item.meta.title}}</span>
16 
+        </template>
17 
+
18 
+        <template v-if="!child.hidden" v-for="child in item.children">
19 
+          <sidebar-item class="nest-menu" v-if="child.children&&child.children.length>0" :routes="[child]" :key="child.path"></sidebar-item>
20 
+
21 
+          <router-link v-else :to="item.path+'/'+child.path" :key="child.name">
22 
+            <el-menu-item :index="item.path+'/'+child.path">
23 
+              <svg-icon v-if="child.meta&&child.meta.icon" :icon-class="child.meta.icon"></svg-icon>
24 
+              <span v-if="child.meta&&child.meta.title">{{child.meta.title}}</span>
25 
+            </el-menu-item>
26 
+          </router-link>
27 
+        </template>
28 
+      </el-submenu>
29 
+
30 
+    </template>
31 
+  </div>
32 
+</template>
33 
+
34 
+<script>
35 
+export default {
36 
+  name: 'SidebarItem',
37 
+  props: {
38 
+    routes: {
39 
+      type: Array
40 
+    }
41 
+  }
42 
+}
43 
+</script>

+ 28 - 0
src/views/layout/components/Sidebar/index.vue
Zobrazit soubor 

@@ -0,0 +1,28 @@
1 
+<template>
2 
+  <scroll-bar>
3 
+    <el-menu mode="vertical" unique-opened :default-active="$route.path" :collapse="isCollapse" background-color="#304156" text-color="#fff" active-text-color="#409EFF">
4 
+      <sidebar-item :routes="routes"></sidebar-item>
5 
+    </el-menu>
6 
+  </scroll-bar>
7 
+</template>
8 
+
9 
+<script>
10 
+import { mapGetters } from 'vuex'
11 
+import SidebarItem from './SidebarItem'
12 
+import ScrollBar from '@/components/ScrollBar'
13 
+
14 
+export default {
15 
+  components: { SidebarItem, ScrollBar },
16 
+  computed: {
17 
+    ...mapGetters([
18 
+      'sidebar'
19 
+    ]),
20 
+    routes() {
21 
+      return this.$router.options.routes
22 
+    },
23 
+    isCollapse() {
24 
+      return !this.sidebar.opened
25 
+    }
26 
+  }
27 
+}
28 
+</script>

+ 0 - 4
src/views/layout/index.js
Zobrazit soubor 

@@ -1,7 +1,3 @@
1 1 
 export { default as Navbar } from './Navbar'
2 
-
3 2 
 export { default as Sidebar } from './Sidebar'
4 
-
5 
-export { default as Levelbar } from './Levelbar'
6 
-
7 3 
 export { default as AppMain } from './AppMain'

+ 15 - 5
src/views/login/index.vue
Zobrazit soubor 

@@ -5,23 +5,24 @@
5 5 
       <h3 class="title">vue-element-admin</h3>
6 6 
       <el-form-item prop="username">
7 7 
         <span class="svg-container svg-container_login">
8 
-          <icon-svg icon-class="yonghuming" />
8 
+          <svg-icon icon-class="user" />
9 9 
         </span>
10 10 
         <el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="username" />
11 11 
       </el-form-item>
12 12 
       <el-form-item prop="password">
13 13 
         <span class="svg-container">
14 
-          <icon-svg icon-class="mima"></icon-svg>
14 
+          <svg-icon icon-class="password"></svg-icon>
15 15 
         </span>
16 
-        <el-input name="password" type="password" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
16 
+        <el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on"
17 17 
           placeholder="password"></el-input>
18 
+          <span class="show-pwd" @click="showPwd"><svg-icon icon-class="eye" /></span>
18 19 
       </el-form-item>
19 20 
       <el-form-item>
20 21 
         <el-button type="primary" style="width:100%;" :loading="loading" @click.native.prevent="handleLogin">
21 22 
           Sign in
22 23 
         </el-button>
23 24 
       </el-form-item>
24 
-      <div class='tips'>
25 
+      <div class="tips">
25 26 
         <span style="margin-right:20px;">username: admin</span>
26 27 
         </span> password: admin</span>
27 28 
       </div>
 
@@ -58,10 +59,18 @@ export default {
58 59 
         username: [{ required: true, trigger: 'blur', validator: validateUsername }],
59 60 
         password: [{ required: true, trigger: 'blur', validator: validatePass }]
60 61 
       },
61 
-      loading: false
62 
+      loading: false,
63 
+      pwdType: 'password'
62 64 
     }
63 65 
   },
64 66 
   methods: {
67 
+    showPwd() {
68 
+      if (this.pwdType === 'password') {
69 
+        this.pwdType = ''
70 
+      } else {
71 
+        this.pwdType = 'password'
72 
+      }
73 
+    },
65 74 
     handleLogin() {
66 75 
       this.$refs.loginForm.validate(valid => {
67 76 
         if (valid) {
 
@@ -154,6 +163,7 @@ export default {
154 163 
       font-size: 16px;
155 164 
       color: $dark_gray;
156 165 
       cursor: pointer;
166 
+      user-select:none;
157 167 
     }
158 168 
     .thirdparty-button{
159 169 
       position: absolute;

+ 8 - 8
src/views/table/index.vue
Zobrazit soubor 

@@ -1,33 +1,33 @@
1 1 
 <template>
2 2 
   <div class="app-container">
3 
-    <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
3 
+    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row>
4 4 
       <el-table-column align="center" label='ID' width="95">
5 
-        <template scope="scope">
5 
+        <template slot-scope="scope">
6 6 
           {{scope.$index}}
7 7 
         </template>
8 8 
       </el-table-column>
9 9 
       <el-table-column label="Title">
10 
-        <template scope="scope">
10 
+        <template slot-scope="scope">
11 11 
           {{scope.row.title}}
12 12 
         </template>
13 13 
       </el-table-column>
14 14 
       <el-table-column label="Author" width="110" align="center">
15 
-        <template scope="scope">
15 
+        <template slot-scope="scope">
16 16 
           <span>{{scope.row.author}}</span>
17 17 
         </template>
18 18 
       </el-table-column>
19 19 
       <el-table-column label="Pageviews" width="110" align="center">
20 
-        <template scope="scope">
20 
+        <template slot-scope="scope">
21 21 
           {{scope.row.pageviews}}
22 22 
         </template>
23 23 
       </el-table-column>
24 24 
       <el-table-column class-name="status-col" label="Status" width="110" align="center">
25 
-        <template scope="scope">
25 
+        <template slot-scope="scope">
26 26 
           <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
27 27 
         </template>
28 28 
       </el-table-column>
29 
-      <el-table-column align="center" prop="display_time" label="Display_time" width="200">
30 
-        <template scope="scope">
29 
+      <el-table-column align="center" prop="created_at" label="Display_time" width="200">
30 
+        <template slot-scope="scope">
31 31 
           <i class="el-icon-time"></i>
32 32 
           <span>{{scope.row.display_time}}</span>
33 33 
         </template>

+ 71 - 0
src/views/tree/index.vue
Zobrazit soubor 

@@ -0,0 +1,71 @@
1 
+<template>
2 
+  <div class="app-container">
3 
+    <el-input placeholder="Filter keyword" v-model="filterText" style="margin-bottom:30px;"></el-input>
4 
+
5 
+    <el-tree class="filter-tree" :data="data2" :props="defaultProps" default-expand-all :filter-node-method="filterNode" ref="tree2"></el-tree>
6 
+
7 
+  </div>
8 
+</template>
9 
+
10 
+<script>
11 
+export default {
12 
+  watch: {
13 
+    filterText(val) {
14 
+      this.$refs.tree2.filter(val)
15 
+    }
16 
+  },
17 
+
18 
+  methods: {
19 
+    filterNode(value, data) {
20 
+      if (!value) return true
21 
+      return data.label.indexOf(value) !== -1
22 
+    }
23 
+  },
24 
+
25 
+  data() {
26 
+    return {
27 
+      filterText: '',
28 
+      data2: [{
29 
+        id: 1,
30 
+        label: 'Level one 1',
31 
+        children: [{
32 
+          id: 4,
33 
+          label: 'Level two 1-1',
34 
+          children: [{
35 
+            id: 9,
36 
+            label: 'Level three 1-1-1'
37 
+          }, {
38 
+            id: 10,
39 
+            label: 'Level three 1-1-2'
40 
+          }]
41 
+        }]
42 
+      }, {
43 
+        id: 2,
44 
+        label: 'Level one 2',
45 
+        children: [{
46 
+          id: 5,
47 
+          label: 'Level two 2-1'
48 
+        }, {
49 
+          id: 6,
50 
+          label: 'Level two 2-2'
51 
+        }]
52 
+      }, {
53 
+        id: 3,
54 
+        label: 'Level one 3',
55 
+        children: [{
56 
+          id: 7,
57 
+          label: 'Level two 3-1'
58 
+        }, {
59 
+          id: 8,
60 
+          label: 'Level two 3-2'
61 
+        }]
62 
+      }],
63 
+      defaultProps: {
64 
+        children: 'children',
65 
+        label: 'label'
66 
+      }
67 
+    }
68 
+  }
69 
+}
70 
+</script>
71 
+