3 |
4 |
5 |
12 |
13 |
14 |
15 |
40 |
--------------------------------------------------------------------------------
/src/icons/svg/tree-table.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/NavLink/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
3 |
8 |
9 | Show Guide
10 |
11 |
12 |
13 |
14 |
37 |
--------------------------------------------------------------------------------
/src/views/example/components/Dropdown/SourceUrl.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
7 |
8 |
9 |
10 |
43 |
--------------------------------------------------------------------------------
/src/views/components-demo/drag-select.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
6 |
7 |
13 |
14 |
15 |
44 |
--------------------------------------------------------------------------------
/src/views/error-log/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
9 | {{ item }}
10 |
11 |
12 |
3 | // todo
4 |
6 | 
15 |
16 |
17 |
18 |
19 |
28 |
29 |
34 |
--------------------------------------------------------------------------------
/src/icons/svg/language.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/router/modules/table.js:
--------------------------------------------------------------------------------
1 | /** When your routing table is too long, you can split it into small modules **/
2 |
3 | import Layout from '@/layout'
4 |
5 | const tableRouter = {
6 | path: '/table',
7 | component: Layout,
8 | redirect: '/table/complex-table',
9 | name: 'Table',
10 | meta: {
11 | title: 'Table',
12 | icon: 'table',
13 | },
14 | children: [
15 | {
16 | path: 'dynamic-table',
17 | component: () => import('@/views/table/dynamic-table/index'),
18 | name: 'DynamicTable',
19 | meta: { title: 'Dynamic Table' },
20 | },
21 | // {
22 | // path: 'drag-table',
23 | // component: () => import('@/views/table/drag-table'),
24 | // name: 'DragTable',
25 | // meta: { title: 'Drag Table' }
26 | // },
27 | // {
28 | // path: 'inline-edit-table',
29 | // component: () => import('@/views/table/inline-edit-table'),
30 | // name: 'InlineEditTable',
31 | // meta: { title: 'Inline Edit' }
32 | // },
33 | // {
34 | // path: 'complex-table',
35 | // component: () => import('@/views/table/complex-table'),
36 | // name: 'ComplexTable',
37 | // meta: { title: 'Complex Table' }
38 | // }
39 | ]
40 | }
41 | export default tableRouter
42 |
--------------------------------------------------------------------------------
/src/views/profile/components/Timeline.vue:
--------------------------------------------------------------------------------
1 |
2 | Please click the bug icon in the upper right corner
7 | 13 | 14 |
15 |
16 |
3 |
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
14 |
44 |
--------------------------------------------------------------------------------
/src/icons/svg/eye-open.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/views/guide/steps.js:
--------------------------------------------------------------------------------
1 | const steps = [
2 | {
3 | element: '#hamburger-container',
4 | popover: {
5 | title: 'Hamburger',
6 | description: 'Open && Close sidebar',
7 | position: 'bottom'
8 | }
9 | },
10 | {
11 | element: '#breadcrumb-container',
12 | popover: {
13 | title: 'Breadcrumb',
14 | description: 'Indicate the current page location',
15 | position: 'bottom'
16 | }
17 | },
18 | {
19 | element: '#header-search',
20 | popover: {
21 | title: 'Page Search',
22 | description: 'Page search, quick navigation',
23 | position: 'left'
24 | }
25 | },
26 | {
27 | element: '#screenfull',
28 | popover: {
29 | title: 'Screenfull',
30 | description: 'Set the page into fullscreen',
31 | position: 'left'
32 | }
33 | },
34 | {
35 | element: '#size-select',
36 | popover: {
37 | title: 'Switch Size',
38 | description: 'Switch the system size',
39 | position: 'left'
40 | }
41 | },
42 | {
43 | element: '#tags-view-container',
44 | popover: {
45 | title: 'Tags view',
46 | description: 'The history of the page you visited',
47 | position: 'bottom'
48 | },
49 | padding: 0
50 | }
51 | ]
52 |
53 | export default steps
54 |
--------------------------------------------------------------------------------
/tests/unit/utils/parseTime.spec.js:
--------------------------------------------------------------------------------
1 | import { parseTime } from '@/utils/index.js'
2 |
3 | describe('Utils:parseTime', () => {
4 | const d = new Date('2018-07-13 17:54:01') // "2018-07-13 17:54:01"
5 | it('timestamp', () => {
6 | expect(parseTime(d)).toBe('2018-07-13 17:54:01')
7 | })
8 | it('timestamp string', () => {
9 | expect(parseTime((d + ''))).toBe('2018-07-13 17:54:01')
10 | })
11 | it('ten digits timestamp', () => {
12 | expect(parseTime((d / 1000).toFixed(0))).toBe('2018-07-13 17:54:01')
13 | })
14 | it('new Date', () => {
15 | expect(parseTime(new Date(d))).toBe('2018-07-13 17:54:01')
16 | })
17 | it('format', () => {
18 | expect(parseTime(d, '{y}-{m}-{d} {h}:{i}')).toBe('2018-07-13 17:54')
19 | expect(parseTime(d, '{y}-{m}-{d}')).toBe('2018-07-13')
20 | expect(parseTime(d, '{y}/{m}/{d} {h}-{i}')).toBe('2018/07/13 17-54')
21 | })
22 | it('get the day of the week', () => {
23 | expect(parseTime(d, '{a}')).toBe('五') // 星期五
24 | })
25 | it('get the day of the week', () => {
26 | expect(parseTime(+d + 1000 * 60 * 60 * 24 * 2, '{a}')).toBe('日') // 星期日
27 | })
28 | it('empty argument', () => {
29 | expect(parseTime()).toBeNull()
30 | })
31 |
32 | it('null', () => {
33 | expect(parseTime(null)).toBeNull()
34 | })
35 | })
36 |
--------------------------------------------------------------------------------
/src/views/example/components/Dropdown/Platform.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ item.title }}
7 |{{ item.content }}
8 |
3 |
15 |
16 |
17 |
18 |
34 |
35 |
47 |
--------------------------------------------------------------------------------
/src/icons/svg/404.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/svg/zip.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Screenfull/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
6 |
7 |
53 |
54 |
64 |
--------------------------------------------------------------------------------
/src/views/table/dynamic-table/components/UnfixedThead.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
20 |
21 | {{ scope.row[fruit] }}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
51 |
--------------------------------------------------------------------------------
/src/layout/mixin/ResizeHandler.js:
--------------------------------------------------------------------------------
1 | import store from '@/store'
2 |
3 | const { body } = document
4 | const WIDTH = 992 // refer to Bootstrap's responsive design
5 |
6 | export default {
7 | watch: {
8 | $route(route) {
9 | if (this.device === 'mobile' && this.sidebar.opened) {
10 | store.dispatch('app/closeSideBar', { withoutAnimation: false })
11 | }
12 | },
13 | },
14 | beforeMount() {
15 | window.addEventListener('resize', this.$_resizeHandler)
16 | },
17 | beforeUnmount() {
18 | window.removeEventListener('resize', this.$_resizeHandler)
19 | },
20 | mounted() {
21 | const isMobile = this.$_isMobile()
22 | if (isMobile) {
23 | store.dispatch('app/toggleDevice', 'mobile')
24 | store.dispatch('app/closeSideBar', { withoutAnimation: true })
25 | }
26 | },
27 | methods: {
28 | // use $_ for mixins properties
29 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
30 | $_isMobile() {
31 | const rect = body.getBoundingClientRect()
32 | return rect.width - 1 < WIDTH
33 | },
34 | $_resizeHandler() {
35 | if (!document.hidden) {
36 | const isMobile = this.$_isMobile()
37 | store.dispatch('app/toggleDevice', isMobile ? 'mobile' : 'desktop')
38 |
39 | if (isMobile) {
40 | store.dispatch('app/closeSideBar', { withoutAnimation: true })
41 | }
42 | }
43 | },
44 | },
45 | }
46 |
--------------------------------------------------------------------------------
/src/store/modules/app.js:
--------------------------------------------------------------------------------
1 | import Cookies from 'js-cookie'
2 |
3 | const state = {
4 | sidebar: {
5 | opened: Cookies.get('sidebarStatus') ? !!+Cookies.get('sidebarStatus') : true,
6 | withoutAnimation: false,
7 | },
8 | device: 'desktop',
9 | size: Cookies.get('size') || 'medium',
10 | }
11 |
12 | const mutations = {
13 | TOGGLE_SIDEBAR: state => {
14 | state.sidebar.opened = !state.sidebar.opened
15 | state.sidebar.withoutAnimation = false
16 | if (state.sidebar.opened) {
17 | Cookies.set('sidebarStatus', 1)
18 | } else {
19 | Cookies.set('sidebarStatus', 0)
20 | }
21 | },
22 | CLOSE_SIDEBAR: (state, withoutAnimation) => {
23 | Cookies.set('sidebarStatus', 0)
24 | state.sidebar.opened = false
25 | state.sidebar.withoutAnimation = withoutAnimation
26 | },
27 | TOGGLE_DEVICE: (state, device) => {
28 | state.device = device
29 | },
30 | SET_SIZE: (state, size) => {
31 | state.size = size
32 | Cookies.set('size', size)
33 | },
34 | }
35 |
36 | const actions = {
37 | toggleSideBar({ commit }) {
38 | commit('TOGGLE_SIDEBAR')
39 | },
40 | closeSideBar({ commit }, { withoutAnimation }) {
41 | commit('CLOSE_SIDEBAR', withoutAnimation)
42 | },
43 | toggleDevice({ commit }, device) {
44 | commit('TOGGLE_DEVICE', device)
45 | },
46 | setSize({ commit }, size) {
47 | commit('SET_SIZE', size)
48 | },
49 | }
50 |
51 | export default {
52 | namespaced: true,
53 | state,
54 | mutations,
55 | actions,
56 | }
57 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/components/TransactionTable.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | apple
7 |
8 |
9 | banana
10 |
11 |
12 | orange
13 |
14 |
15 |
16 |
17 |
3 |
4 |
5 |
7 | copy
8 |
9 |
10 |
11 |
13 | copy
14 |
15 |
16 |
17 |
18 |
19 |
20 |
49 |
50 |
--------------------------------------------------------------------------------
/src/components/SizeSelect/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
3 |
8 |
12 |
13 |
14 |
29 |
30 |
36 |
37 |
--------------------------------------------------------------------------------
/src/icons/svg/pdf.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Charts/mixins/resize.js:
--------------------------------------------------------------------------------
1 | import { debounce } from '@/utils'
2 |
3 | export default {
4 | data() {
5 | return {
6 | $_sidebarElm: null,
7 | $_resizeHandler: null,
8 | }
9 | },
10 | mounted() {
11 | this.initListener()
12 | },
13 | activated() {
14 | if (!this.$_resizeHandler) {
15 | // avoid duplication init
16 | this.initListener()
17 | }
18 |
19 | // when keep-alive chart activated, auto resize
20 | this.resize()
21 | },
22 | beforeUnmount() {
23 | this.destroyListener()
24 | },
25 | deactivated() {
26 | this.destroyListener()
27 | },
28 | methods: {
29 | // use $_ for mixins properties
30 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
31 | $_sidebarResizeHandler(e) {
32 | if (e.propertyName === 'width') {
33 | this.$_resizeHandler()
34 | }
35 | },
36 | initListener() {
37 | this.$_resizeHandler = debounce(() => {
38 | this.resize()
39 | }, 100)
40 | window.addEventListener('resize', this.$_resizeHandler)
41 |
42 | this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
43 | this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
44 | },
45 | destroyListener() {
46 | window.removeEventListener('resize', this.$_resizeHandler)
47 | this.$_resizeHandler = null
48 |
49 | this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
50 | },
51 | resize() {
52 | const { chart } = this
53 | chart && chart.resize()
54 | },
55 | },
56 | }
57 |
--------------------------------------------------------------------------------
/src/layout/components/Sidebar/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
11 |
3 |
5 |
15 |
22 |
23 |
24 |
25 |
26 |
57 |
--------------------------------------------------------------------------------
/src/components/DragSelect/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 |
39 |
66 |
67 |
--------------------------------------------------------------------------------
/src/views/tab/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | mounted times ：{{ createdTimes }}
4 |
6 |
7 | // todo keep--alive缓存失效
8 |
9 |
11 |
12 |
13 |
14 |
15 |
16 |
53 |
54 |
59 |
--------------------------------------------------------------------------------
/src/views/profile/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
27 |
28 |
29 |
63 |
--------------------------------------------------------------------------------
/src/views/components-demo/tinymce.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
8 |
9 |
10 |
11 |
12 |
13 |
15 |
16 |
18 |
19 |
21 |
22 |
23 |
24 |
25 |
26 |
3 |
7 |
12 |
13 |
14 |
30 |
31 |
36 |
37 |
--------------------------------------------------------------------------------
/src/directive/clipboard/clipboard.js:
--------------------------------------------------------------------------------
1 | // Inspired by https://github.com/Inndy/vue-clipboard2
2 | const Clipboard = require('clipboard')
3 | if (!Clipboard) {
4 | throw new Error('you should npm install `clipboard` --save at first ')
5 | }
6 |
7 | export default {
8 | bind(el, binding) {
9 | if (binding.arg === 'success') {
10 | el._v_clipboard_success = binding.value
11 | } else if (binding.arg === 'error') {
12 | el._v_clipboard_error = binding.value
13 | } else {
14 | const clipboard = new Clipboard(el, {
15 | text() { return binding.value },
16 | action() { return binding.arg === 'cut' ? 'cut' : 'copy' }
17 | })
18 | clipboard.on('success', e => {
19 | const callback = el._v_clipboard_success
20 | callback && callback(e) // eslint-disable-line
21 | })
22 | clipboard.on('error', e => {
23 | const callback = el._v_clipboard_error
24 | callback && callback(e) // eslint-disable-line
25 | })
26 | el._v_clipboard = clipboard
27 | }
28 | },
29 | update(el, binding) {
30 | if (binding.arg === 'success') {
31 | el._v_clipboard_success = binding.value
32 | } else if (binding.arg === 'error') {
33 | el._v_clipboard_error = binding.value
34 | } else {
35 | el._v_clipboard.text = function() { return binding.value }
36 | el._v_clipboard.action = function() { return binding.arg === 'cut' ? 'cut' : 'copy' }
37 | }
38 | },
39 | unbind(el, binding) {
40 | if (binding.arg === 'success') {
41 | delete el._v_clipboard_success
42 | } else if (binding.arg === 'error') {
43 | delete el._v_clipboard_error
44 | } else {
45 | el._v_clipboard.destroy()
46 | delete el._v_clipboard
47 | }
48 | }
49 | }
50 |
--------------------------------------------------------------------------------
/src/icons/svg/exit-fullscreen.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/icons/svg/tree.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/mock/index.js:
--------------------------------------------------------------------------------
1 | const Mock = require('mockjs')
2 | const { param2Obj } = require('./utils')
3 |
4 | const user = require('./user')
5 | const table = require('./table')
6 | const role = require('./role')
7 | const article = require('./article')
8 | const search = require('./remote-search')
9 |
10 | const mocks = [
11 | ...user,
12 | ...table,
13 | ...role,
14 | ...article,
15 | ...search
16 | ]
17 |
18 | // for front mock
19 | // please use it cautiously, it will redefine XMLHttpRequest,
20 | // which will cause many of your third-party libraries to be invalidated(like progress event).
21 | function mockXHR() {
22 | // mock patch
23 | // https://github.com/nuysoft/Mock/issues/300
24 | Mock.XHR.prototype.proxy_send = Mock.XHR.prototype.send
25 | Mock.XHR.prototype.send = function() {
26 | if (this.custom.xhr) {
27 | this.custom.xhr.withCredentials = this.withCredentials || false
28 |
29 | if (this.responseType) {
30 | this.custom.xhr.responseType = this.responseType
31 | }
32 | }
33 | this.proxy_send(...arguments)
34 | }
35 |
36 | function XHR2ExpressReqWrap(respond) {
37 | return function(options) {
38 | let result = null
39 | if (respond instanceof Function) {
40 | const { body, type, url } = options
41 | // https://expressjs.com/en/4x/api.html#req
42 | result = respond({
43 | method: type,
44 | body: JSON.parse(body),
45 | query: param2Obj(url)
46 | })
47 | } else {
48 | result = respond
49 | }
50 | return Mock.mock(result)
51 | }
52 | }
53 |
54 | for (const i of mocks) {
55 | Mock.mock(new RegExp(i.url), i.type || 'get', XHR2ExpressReqWrap(i.response))
56 | }
57 | }
58 |
59 | module.exports = {
60 | mocks,
61 | mockXHR
62 | }
63 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/components/mixins/resize.js:
--------------------------------------------------------------------------------
1 | import { debounce } from '@/utils'
2 |
3 | export default {
4 | data() {
5 | return {
6 | $_sidebarElm: null,
7 | $_resizeHandler: null,
8 | }
9 | },
10 | mounted() {
11 | this.$_resizeHandler = debounce(() => {
12 | if (this.chart) {
13 | this.chart.resize()
14 | }
15 | }, 100)
16 | this.$_initResizeEvent()
17 | this.$_initSidebarResizeEvent()
18 | },
19 | beforeUnmount() {
20 | this.$_destroyResizeEvent()
21 | this.$_destroySidebarResizeEvent()
22 | },
23 | // to fixed bug when cached by keep-alive
24 | // https://github.com/PanJiaChen/vue-element-admin/issues/2116
25 | activated() {
26 | this.$_initResizeEvent()
27 | this.$_initSidebarResizeEvent()
28 | },
29 | deactivated() {
30 | this.$_destroyResizeEvent()
31 | this.$_destroySidebarResizeEvent()
32 | },
33 | methods: {
34 | // use $_ for mixins properties
35 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
36 | $_initResizeEvent() {
37 | window.addEventListener('resize', this.$_resizeHandler)
38 | },
39 | $_destroyResizeEvent() {
40 | window.removeEventListener('resize', this.$_resizeHandler)
41 | },
42 | $_sidebarResizeHandler(e) {
43 | if (e.propertyName === 'width') {
44 | this.$_resizeHandler()
45 | }
46 | },
47 | $_initSidebarResizeEvent() {
48 | this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
49 | this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
50 | },
51 | $_destroySidebarResizeEvent() {
52 | this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
53 | },
54 | },
55 | }
56 |
--------------------------------------------------------------------------------
/src/components/Tinymce/dynamicLoadScript.js:
--------------------------------------------------------------------------------
1 | let callbacks = []
2 |
3 | function loadedTinymce() {
4 | // to fixed https://github.com/PanJiaChen/vue-element-admin/issues/2144
5 | // check is successfully downloaded script
6 | return window.tinymce
7 | }
8 |
9 | const dynamicLoadScript = (src, callback) => {
10 | const existingScript = document.getElementById(src)
11 | const cb = callback || function() {}
12 |
13 | if (!existingScript) {
14 | const script = document.createElement('script')
15 | script.src = src // src url for the third-party library being loaded.
16 | script.id = src
17 | document.body.appendChild(script)
18 | callbacks.push(cb)
19 | const onEnd = 'onload' in script ? stdOnEnd : ieOnEnd
20 | onEnd(script)
21 | }
22 |
23 | if (existingScript && cb) {
24 | if (loadedTinymce()) {
25 | cb(null, existingScript)
26 | } else {
27 | callbacks.push(cb)
28 | }
29 | }
30 |
31 | function stdOnEnd(script) {
32 | script.onload = function() {
33 | // this.onload = null here is necessary
34 | // because even IE9 works not like others
35 | this.onerror = this.onload = null
36 | for (const cb of callbacks) {
37 | cb(null, script)
38 | }
39 | callbacks = null
40 | }
41 | script.onerror = function() {
42 | this.onerror = this.onload = null
43 | cb(new Error('Failed to load ' + src), script)
44 | }
45 | }
46 |
47 | function ieOnEnd(script) {
48 | script.onreadystatechange = function() {
49 | if (this.readyState !== 'complete' && this.readyState !== 'loaded') return
50 | this.onreadystatechange = null
51 | for (const cb of callbacks) {
52 | cb(null, script) // there is no way to catch loading errors in IE8
53 | }
54 | callbacks = null
55 | }
56 | }
57 | }
58 |
59 | export default dynamicLoadScript
60 |
--------------------------------------------------------------------------------
/mock/user.js:
--------------------------------------------------------------------------------
1 |
2 | const tokens = {
3 | admin: {
4 | token: 'admin-token'
5 | },
6 | editor: {
7 | token: 'editor-token'
8 | }
9 | }
10 |
11 | const users = {
12 | 'admin-token': {
13 | roles: ['admin'],
14 | introduction: 'I am a super administrator',
15 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
16 | name: 'Super Admin'
17 | },
18 | 'editor-token': {
19 | roles: ['editor'],
20 | introduction: 'I am an editor',
21 | avatar: 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
22 | name: 'Normal Editor'
23 | }
24 | }
25 |
26 | module.exports = [
27 | // user login
28 | {
29 | url: '/vue-element-admin/user/login',
30 | type: 'post',
31 | response: config => {
32 | const { username } = config.body
33 | const token = tokens[username]
34 |
35 | // mock error
36 | if (!token) {
37 | return {
38 | code: 60204,
39 | message: 'Account and password are incorrect.'
40 | }
41 | }
42 |
43 | return {
44 | code: 20000,
45 | data: token
46 | }
47 | }
48 | },
49 |
50 | // get user info
51 | {
52 | url: '/vue-element-admin/user/info\.*',
53 | type: 'get',
54 | response: config => {
55 | const { token } = config.query
56 | const info = users[token]
57 |
58 | // mock error
59 | if (!info) {
60 | return {
61 | code: 50008,
62 | message: 'Login failed, unable to get user details.'
63 | }
64 | }
65 |
66 | return {
67 | code: 20000,
68 | data: info
69 | }
70 | }
71 | },
72 |
73 | // user logout
74 | {
75 | url: '/vue-element-admin/user/logout',
76 | type: 'post',
77 | response: _ => {
78 | return {
79 | code: 20000,
80 | data: 'success'
81 | }
82 | }
83 | }
84 | ]
85 |
--------------------------------------------------------------------------------
/src/styles/btn.scss:
--------------------------------------------------------------------------------
1 | @import './variables.scss';
2 |
3 | @mixin colorBtn($color) {
4 | background: $color;
5 |
6 | &:hover {
7 | color: $color;
8 |
9 | &:before,
10 | &:after {
11 | background: $color;
12 | }
13 | }
14 | }
15 |
16 | .blue-btn {
17 | @include colorBtn($blue)
18 | }
19 |
20 | .light-blue-btn {
21 | @include colorBtn($light-blue)
22 | }
23 |
24 | .red-btn {
25 | @include colorBtn($red)
26 | }
27 |
28 | .pink-btn {
29 | @include colorBtn($pink)
30 | }
31 |
32 | .green-btn {
33 | @include colorBtn($green)
34 | }
35 |
36 | .tiffany-btn {
37 | @include colorBtn($tiffany)
38 | }
39 |
40 | .yellow-btn {
41 | @include colorBtn($yellow)
42 | }
43 |
44 | .pan-btn {
45 | font-size: 14px;
46 | color: #fff;
47 | padding: 14px 36px;
48 | border-radius: 8px;
49 | border: none;
50 | outline: none;
51 | transition: 600ms ease all;
52 | position: relative;
53 | display: inline-block;
54 |
55 | &:hover {
56 | background: #fff;
57 |
58 | &:before,
59 | &:after {
60 | width: 100%;
61 | transition: 600ms ease all;
62 | }
63 | }
64 |
65 | &:before,
66 | &:after {
67 | content: '';
68 | position: absolute;
69 | top: 0;
70 | right: 0;
71 | height: 2px;
72 | width: 0;
73 | transition: 400ms ease all;
74 | }
75 |
76 | &::after {
77 | right: inherit;
78 | top: inherit;
79 | left: 0;
80 | bottom: 0;
81 | }
82 | }
83 |
84 | .custom-button {
85 | display: inline-block;
86 | line-height: 1;
87 | white-space: nowrap;
88 | cursor: pointer;
89 | background: #fff;
90 | color: #fff;
91 | -webkit-appearance: none;
92 | text-align: center;
93 | box-sizing: border-box;
94 | outline: 0;
95 | margin: 0;
96 | padding: 10px 15px;
97 | font-size: 14px;
98 | border-radius: 4px;
99 | }
100 |
--------------------------------------------------------------------------------
/src/utils/scroll-to.js:
--------------------------------------------------------------------------------
1 | Math.easeInOutQuad = function(t, b, c, d) {
2 | t /= d / 2
3 | if (t < 1) {
4 | return c / 2 * t * t + b
5 | }
6 | t--
7 | return -c / 2 * (t * (t - 2) - 1) + b
8 | }
9 |
10 | // requestAnimationFrame for Smart Animating http://goo.gl/sx5sts
11 | var requestAnimFrame = (function() {
12 | return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function(callback) { window.setTimeout(callback, 1000 / 60) }
13 | })()
14 |
15 | /**
16 | * Because it's so fucking difficult to detect the scrolling element, just move them all
17 | * @param {number} amount
18 | */
19 | function move(amount) {
20 | document.documentElement.scrollTop = amount
21 | document.body.parentNode.scrollTop = amount
22 | document.body.scrollTop = amount
23 | }
24 |
25 | function position() {
26 | return document.documentElement.scrollTop || document.body.parentNode.scrollTop || document.body.scrollTop
27 | }
28 |
29 | /**
30 | * @param {number} to
31 | * @param {number} duration
32 | * @param {Function} callback
33 | */
34 | export function scrollTo(to, duration, callback) {
35 | const start = position()
36 | const change = to - start
37 | const increment = 20
38 | let currentTime = 0
39 | duration = (typeof (duration) === 'undefined') ? 500 : duration
40 | var animateScroll = function() {
41 | // increment the time
42 | currentTime += increment
43 | // find the value with the quadratic in-out easing function
44 | var val = Math.easeInOutQuad(currentTime, start, change, duration)
45 | // move the document.body
46 | move(val)
47 | // do the animation unless its over
48 | if (currentTime < duration) {
49 | requestAnimFrame(animateScroll)
50 | } else {
51 | if (callback && typeof (callback) === 'function') {
52 | // the animation is done so lets callback
53 | callback()
54 | }
55 | }
56 | }
57 | animateScroll()
58 | }
59 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/components/TodoList/Todo.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 |
10 |
11 |
4 |
10 |
11 |
12 |
13 |
22 |
3 |
4 |
5 |
6 |
7 |
56 |
57 |
78 |
--------------------------------------------------------------------------------
/src/components/GithubCorner/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
23 |
24 |
25 |
26 |
55 |
--------------------------------------------------------------------------------
/src/views/table/dynamic-table/components/FixedThead.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
18 |
20 |
21 | {{ scope.row[fruit] }}
22 |
23 |
24 |
25 |
26 |
27 |
28 |
66 |
67 |
--------------------------------------------------------------------------------
/src/views/dashboard/editor/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 | apple
7 |
8 |
9 | banana
10 |
11 |
12 | orange
13 |
14 |
15 |
16 |
17 |
3 |
18 |
19 |
20 |
42 |
43 |
75 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/components/PieChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
80 |
--------------------------------------------------------------------------------
/src/router/modules/nested.js:
--------------------------------------------------------------------------------
1 | /** When your routing table is too long, you can split it into small modules **/
2 |
3 | import Layout from '@/layout'
4 |
5 | const nestedRouter = {
6 | path: '/nested',
7 | component: Layout,
8 | redirect: '/nested/menu1/menu1-1',
9 | name: 'Nested',
10 | meta: {
11 | title: 'Nested Routes',
12 | icon: 'nested',
13 | },
14 | children: [
15 | {
16 | path: 'menu1',
17 | component: () => import('@/views/nested/menu1/index'), // Parent router-view
18 | name: 'Menu1',
19 | meta: { title: 'Menu 1' },
20 | redirect: '/nested/menu1/menu1-1',
21 | children: [
22 | {
23 | path: 'menu1-1',
24 | component: () => import('@/views/nested/menu1/menu1-1'),
25 | name: 'Menu1-1',
26 | meta: { title: 'Menu 1-1' },
27 | },
28 | {
29 | path: 'menu1-2',
30 | component: () => import('@/views/nested/menu1/menu1-2'),
31 | name: 'Menu1-2',
32 | redirect: '/nested/menu1/menu1-2/menu1-2-1',
33 | meta: { title: 'Menu 1-2' },
34 | children: [
35 | {
36 | path: 'menu1-2-1',
37 | component: () => import('@/views/nested/menu1/menu1-2/menu1-2-1'),
38 | name: 'Menu1-2-1',
39 | meta: { title: 'Menu 1-2-1' },
40 | },
41 | {
42 | path: 'menu1-2-2',
43 | component: () => import('@/views/nested/menu1/menu1-2/menu1-2-2'),
44 | name: 'Menu1-2-2',
45 | meta: { title: 'Menu 1-2-2' },
46 | },
47 | ],
48 | },
49 | {
50 | path: 'menu1-3',
51 | component: () => import('@/views/nested/menu1/menu1-3'),
52 | name: 'Menu1-3',
53 | meta: { title: 'Menu 1-3' },
54 | },
55 | ],
56 | },
57 | {
58 | path: 'menu2',
59 | name: 'Menu2',
60 | component: () => import('@/views/nested/menu2/index'),
61 | meta: { title: 'Menu 2' },
62 | },
63 | ],
64 | }
65 |
66 | export default nestedRouter
67 |
--------------------------------------------------------------------------------
/src/layout/components/Sidebar/Logo.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 | Your roles:
6 | {{ item }}
7 |
8 |
14 |
10 | {{ name }}
11 | Editor's Dashboard
12 |
13 |
15 | ![]()
16 |
17 |
3 |
4 |
5 | ![]()
6 |
8 |
9 | ![]()
10 |
12 |
13 |
14 |
15 |
16 |
33 |
34 |
83 |
--------------------------------------------------------------------------------
/src/views/components-demo/drag-dialog.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ title }}
7 |{{ title }}
11 |
3 |
4 | open a Drag Dialog
5 |
6 |
7 |
8 |
10 |
11 |
15 |
16 |
17 |
18 |
19 |
63 |
--------------------------------------------------------------------------------
/src/icons/svg/shopping.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/README-zh.md:
--------------------------------------------------------------------------------
1 | # element3-admin
2 |
3 | > 这是一个极简的 element3 admin 管理后台模板。它只包含了 Element3 UI
4 |
5 | 目前版本为 `v4.0+` 基于 `vue-cli` 进行构建
6 |
7 |
8 | ## 相关项目
9 |
10 | - [element3-admin-template](https://github.com/hug-sun/element3-admin-template)
11 |
12 | - [element3-admin-ts-template](https://github.com/hug-sun/element3-admin-ts-template)
13 |
14 | - [element3-admin](https://github.com/hug-sun/element3-admin)
15 |
16 | ## Build Setup
17 |
18 | ```bash
19 | # 克隆项目
20 | git clone https://github.com/hug-sun/element3-admin-template.git
21 |
22 | # 进入项目目录
23 | cd element3-admin-template
24 |
25 | # 安装依赖
26 | npm install
27 |
28 | # 建议不要直接使用 cnpm 安装以来，会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
29 | npm install --registry=https://registry.npm.taobao.org
30 |
31 | # 启动服务
32 | npm run dev
33 | ```
34 |
35 | 浏览器访问 [http://localhost:9528](http://localhost:9528)
36 |
37 | ## 发布
38 |
39 | ```bash
40 | # 构建测试环境
41 | npm run build:stage
42 |
43 | # 构建生产环境
44 | npm run build:prod
45 | ```
46 |
47 | ## 其它
48 |
49 | ```bash
50 | # 预览发布环境效果
51 | npm run preview
52 |
53 | # 预览发布环境效果 + 静态资源分析
54 | npm run preview -- --report
55 |
56 | # 代码格式检查
57 | npm run lint
58 |
59 | # 代码格式检查并自动修复
60 | npm run lint -- --fix
61 | ```
62 |
63 | ## Browsers support
64 |
65 | Modern browsers and Internet Explorer 10+.
66 |
67 | | [
](http://godban.github.io/browsers-support-badges/)IE / Edge | [
](http://godban.github.io/browsers-support-badges/)Firefox | [
](http://godban.github.io/browsers-support-badges/)Chrome | [
](http://godban.github.io/browsers-support-badges/)Safari |
68 | | --------- | --------- | --------- | --------- |
69 | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
70 |
71 |
72 |
--------------------------------------------------------------------------------
/src/icons/svg/dashboard.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/mock/role/index.js:
--------------------------------------------------------------------------------
1 | const Mock = require('mockjs')
2 | const { deepClone } = require('../utils')
3 | const { asyncRoutes, constantRoutes } = require('./routes.js')
4 |
5 | const routes = deepClone([...constantRoutes, ...asyncRoutes])
6 |
7 | const roles = [
8 | {
9 | key: 'admin',
10 | name: 'admin',
11 | description: 'Super Administrator. Have access to view all pages.',
12 | routes: routes
13 | },
14 | {
15 | key: 'editor',
16 | name: 'editor',
17 | description: 'Normal Editor. Can see all pages except permission page',
18 | routes: routes.filter(i => i.path !== '/permission')// just a mock
19 | },
20 | {
21 | key: 'visitor',
22 | name: 'visitor',
23 | description: 'Just a visitor. Can only see the home page and the document page',
24 | routes: [{
25 | path: '',
26 | redirect: 'dashboard',
27 | children: [
28 | {
29 | path: 'dashboard',
30 | name: 'Dashboard',
31 | meta: { title: 'dashboard', icon: 'dashboard' }
32 | }
33 | ]
34 | }]
35 | }
36 | ]
37 |
38 | module.exports = [
39 | // mock get all routes form server
40 | {
41 | url: '/vue-element-admin/routes',
42 | type: 'get',
43 | response: _ => {
44 | return {
45 | code: 20000,
46 | data: routes
47 | }
48 | }
49 | },
50 |
51 | // mock get all roles form server
52 | {
53 | url: '/vue-element-admin/roles',
54 | type: 'get',
55 | response: _ => {
56 | return {
57 | code: 20000,
58 | data: roles
59 | }
60 | }
61 | },
62 |
63 | // add role
64 | {
65 | url: '/vue-element-admin/role',
66 | type: 'post',
67 | response: {
68 | code: 20000,
69 | data: {
70 | key: Mock.mock('@integer(300, 5000)')
71 | }
72 | }
73 | },
74 |
75 | // update role
76 | {
77 | url: '/vue-element-admin/role/[A-Za-z0-9]',
78 | type: 'put',
79 | response: {
80 | code: 20000,
81 | data: {
82 | status: 'success'
83 | }
84 | }
85 | },
86 |
87 | // delete role
88 | {
89 | url: '/vue-element-admin/role/[A-Za-z0-9]',
90 | type: 'delete',
91 | response: {
92 | code: 20000,
93 | data: {
94 | status: 'success'
95 | }
96 | }
97 | }
98 | ]
99 |
--------------------------------------------------------------------------------
/src/views/table/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
11 |
12 | {{ scope.index_ + 1 }}
13 |
14 |
15 |
16 |
17 | {{ scope.row.title }}
18 |
19 |
20 |
21 |
22 | {{ scope.row.author }}
23 |
24 |
25 |
26 |
27 | {{ scope.row.pageviews }}
28 |
29 |
30 |
31 |
32 | {{ scope.row.status }}
33 |
34 |
35 |
36 |
37 |
38 | {{ scope.row.display_time }}
39 |
40 |
41 |
42 |
43 |
44 |
45 |
77 |
--------------------------------------------------------------------------------
/src/components/Sticky/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
13 |
14 |
92 |
--------------------------------------------------------------------------------
/src/store/modules/permission.js:
--------------------------------------------------------------------------------
1 | import { asyncRoutes, constantRoutes } from '@/router'
2 | import router from '@/router'
3 | /**
4 | * Use meta.role to determine if the current user has permission
5 | * @param roles
6 | * @param route
7 | */
8 | function hasPermission(roles, route) {
9 | if (route.meta && route.meta.roles) {
10 | return roles.some(role => route.meta.roles.includes(role))
11 | } else {
12 | return true
13 | }
14 | }
15 |
16 | /**
17 | * Filter asynchronous routing tables by recursion
18 | * @param routes asyncRoutes
19 | * @param roles
20 | */
21 | export function filterAsyncRoutes(routes, roles) {
22 | const res = []
23 |
24 | routes.forEach(route => {
25 | const tmp = { ...route }
26 | if (hasPermission(roles, tmp)) {
27 | if (tmp.children) {
28 | tmp.children = filterAsyncRoutes(tmp.children, roles)
29 | }
30 | res.push(tmp)
31 | }
32 | })
33 |
34 | return res
35 | }
36 |
37 | const state = {
38 | routes: [],
39 | addRoutes: [],
40 | removeRoutes: [], // 用于删除动态路由
41 | }
42 |
43 | const mutations = {
44 | SET_ROUTES: (state, routes) => {
45 | state.addRoutes = routes
46 | state.routes = constantRoutes.concat(routes)
47 | },
48 | SET_REMOVE_ROUTES: (state, routes) => {
49 | state.removeRoutes = routes
50 | },
51 | }
52 |
53 | const actions = {
54 | generateRoutes({ commit }, roles) {
55 | return new Promise(resolve => {
56 | let accessedRoutes
57 | if (roles.includes('admin')) {
58 | accessedRoutes = asyncRoutes || []
59 | } else {
60 | accessedRoutes = filterAsyncRoutes(asyncRoutes, roles)
61 | }
62 | commit('SET_ROUTES', accessedRoutes)
63 | resolve(accessedRoutes)
64 | })
65 | },
66 | addRoutes({ commit }, accessRoutes) {
67 | // 添加动态路由，同时保存移除函数，将来如果需要重置路由可以用到它们
68 | const removeRoutes = []
69 | accessRoutes.forEach(route => {
70 | const removeRoute = router.addRoute(route)
71 | removeRoutes.push(removeRoute)
72 | })
73 | commit('SET_REMOVE_ROUTES', removeRoutes)
74 | },
75 | resetRoutes({ commit, state }) {
76 | // 重置路由为初始状态，用户切换角色时需要用到
77 | state.removeRoutes.forEach(fn => fn())
78 | // 路由数据重置
79 | commit('SET_ROUTES', [])
80 | },
81 | }
82 |
83 | export default {
84 | namespaced: true,
85 | state,
86 | mutations,
87 | actions,
88 | }
89 |
--------------------------------------------------------------------------------
/src/components/Breadcrumb/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
8 |
10 |
11 | sticky
9 |
3 |
15 |
16 |
17 |
92 |
93 |
102 |
--------------------------------------------------------------------------------
/src/components/ErrorLog/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
7 |
8 |
9 |
10 |
15 |
16 |
17 |
24 |
31 |
39 |
40 |
41 | {{ scope.row.err.stack }}
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
70 |
71 |
79 |
--------------------------------------------------------------------------------
/src/components/Kanban/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 | Error Log
12 | Clear All
13 |
14 |
18 |
19 |
20 | {{ row.err.message }}
21 |
22 |
23 | 24 |
25 |
26 |
27 | {{ row.vm.$vnode.tag }} error in {{ row.info }}
28 |
29 |
30 | 31 |
32 |
33 |
34 | {{ row.url }}
35 |
36 |
37 |
38 |
3 |
13 |
14 |
17 |
18 |
19 |
20 |
55 |
100 |
--------------------------------------------------------------------------------
/src/directive/waves/waves.js:
--------------------------------------------------------------------------------
1 | import './waves.css'
2 |
3 | const context = '@@wavesContext'
4 |
5 | function handleClick(el, binding) {
6 | function handle(e) {
7 | const customOpts = Object.assign({}, binding.value)
8 | const opts = Object.assign({
9 | ele: el, // 波纹作用元素
10 | type: 'hit', // hit 点击位置扩散 center中心点扩展
11 | color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色
12 | },
13 | customOpts
14 | )
15 | const target = opts.ele
16 | if (target) {
17 | target.style.position = 'relative'
18 | target.style.overflow = 'hidden'
19 | const rect = target.getBoundingClientRect()
20 | let ripple = target.querySelector('.waves-ripple')
21 | if (!ripple) {
22 | ripple = document.createElement('span')
23 | ripple.className = 'waves-ripple'
24 | ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px'
25 | target.appendChild(ripple)
26 | } else {
27 | ripple.className = 'waves-ripple'
28 | }
29 | switch (opts.type) {
30 | case 'center':
31 | ripple.style.top = rect.height / 2 - ripple.offsetHeight / 2 + 'px'
32 | ripple.style.left = rect.width / 2 - ripple.offsetWidth / 2 + 'px'
33 | break
34 | default:
35 | ripple.style.top =
36 | (e.pageY - rect.top - ripple.offsetHeight / 2 - document.documentElement.scrollTop ||
37 | document.body.scrollTop) + 'px'
38 | ripple.style.left =
39 | (e.pageX - rect.left - ripple.offsetWidth / 2 - document.documentElement.scrollLeft ||
40 | document.body.scrollLeft) + 'px'
41 | }
42 | ripple.style.backgroundColor = opts.color
43 | ripple.className = 'waves-ripple z-active'
44 | return false
45 | }
46 | }
47 |
48 | if (!el[context]) {
49 | el[context] = {
50 | removeHandle: handle
51 | }
52 | } else {
53 | el[context].removeHandle = handle
54 | }
55 |
56 | return handle
57 | }
58 |
59 | export default {
60 | bind(el, binding) {
61 | el.addEventListener('click', handleClick(el, binding), false)
62 | },
63 | update(el, binding) {
64 | el.removeEventListener('click', el[context].removeHandle, false)
65 | el.addEventListener('click', handleClick(el, binding), false)
66 | },
67 | unbind(el) {
68 | el.removeEventListener('click', el[context].removeHandle, false)
69 | el[context] = null
70 | delete el[context]
71 | }
72 | }
73 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # element3-admin
2 |
3 | English | [简体中文](./README-zh.md)
4 |
5 | > A minimal vue admin template with Element3 UI
6 |
7 |
8 | ## Build Setup
9 |
10 | ```bash
11 | # clone the project
12 | git clone https://github.com/hug-sun/element3-admin-template.git
13 |
14 | # enter the project directory
15 | cd element3-admin-template
16 |
17 | # install dependency
18 | npm install
19 |
20 | # develop
21 | npm run dev
22 | ```
23 |
24 | This will automatically open http://localhost:9528
25 |
26 | ## Build
27 |
28 | ```bash
29 | # build for test environment
30 | npm run build:stage
31 |
32 | # build for production environment
33 | npm run build:prod
34 | ```
35 |
36 | ## Advanced
37 |
38 | ```bash
39 | # preview the release environment effect
40 | npm run preview
41 |
42 | # preview the release environment effect + static resource analysis
43 | npm run preview -- --report
44 |
45 | # code format check
46 | npm run lint
47 |
48 | # code format check and auto fix
49 | npm run lint -- --fix
50 | ```
51 |
52 | ## Extra
53 |
54 | For `typescript` version, you can use [element3-admin-ts-template](https://github.com/hug-sun/element3-admin-ts-template)
55 |
56 | ## Related Project
57 |
58 | - [element3-admin-template](https://github.com/hug-sun/element3-admin-template)
59 |
60 | - [element3-admin-ts-template](https://github.com/hug-sun/element3-admin-ts-template)
61 |
62 | - [element3-admin](https://github.com/hug-sun/element3-admin)
63 |
64 | ## Browsers support
65 |
66 | Modern browsers and Internet Explorer 10+.
67 |
68 | | [
4 | {{ headerText }}
5 |
6 | {{ element.name }} {{ element.id }}
15 |
16 | ](http://godban.github.io/browsers-support-badges/)IE / Edge | [](http://godban.github.io/browsers-support-badges/)Firefox | [](http://godban.github.io/browsers-support-badges/)Chrome | [](http://godban.github.io/browsers-support-badges/)Safari |
69 | | --------- | --------- | --------- | --------- |
70 | | IE10, IE11, Edge| last 2 versions| last 2 versions| last 2 versions
71 |
72 |
73 |
--------------------------------------------------------------------------------
/mock/mock-server.js:
--------------------------------------------------------------------------------
1 | const chokidar = require('chokidar')
2 | const bodyParser = require('body-parser')
3 | const chalk = require('chalk')
4 | const path = require('path')
5 | const Mock = require('mockjs')
6 |
7 | const mockDir = path.join(process.cwd(), 'mock')
8 |
9 | function registerRoutes(app) {
10 | let mockLastIndex
11 | const { mocks } = require('./index.js')
12 | const mocksForServer = mocks.map(route => {
13 | return responseFake(route.url, route.type, route.response)
14 | })
15 | for (const mock of mocksForServer) {
16 | app[mock.type](mock.url, mock.response)
17 | mockLastIndex = app._router.stack.length
18 | }
19 | const mockRoutesLength = Object.keys(mocksForServer).length
20 | return {
21 | mockRoutesLength: mockRoutesLength,
22 | mockStartIndex: mockLastIndex - mockRoutesLength
23 | }
24 | }
25 |
26 | function unregisterRoutes() {
27 | Object.keys(require.cache).forEach(i => {
28 | if (i.includes(mockDir)) {
29 | delete require.cache[require.resolve(i)]
30 | }
31 | })
32 | }
33 |
34 | // for mock server
35 | const responseFake = (url, type, respond) => {
36 | return {
37 | url: new RegExp(`${process.env.VUE_APP_BASE_API}${url}`),
38 | type: type || 'get',
39 | response(req, res) {
40 | console.log('request invoke:' + req.path)
41 | res.json(Mock.mock(respond instanceof Function ? respond(req, res) : respond))
42 | }
43 | }
44 | }
45 |
46 | module.exports = app => {
47 | // parse app.body
48 | // https://expressjs.com/en/4x/api.html#req.body
49 | app.use(bodyParser.json())
50 | app.use(bodyParser.urlencoded({
51 | extended: true
52 | }))
53 |
54 | const mockRoutes = registerRoutes(app)
55 | var mockRoutesLength = mockRoutes.mockRoutesLength
56 | var mockStartIndex = mockRoutes.mockStartIndex
57 |
58 | // watch files, hot reload mock server
59 | chokidar.watch(mockDir, {
60 | ignored: /mock-server/,
61 | ignoreInitial: true
62 | }).on('all', (event, path) => {
63 | if (event === 'change' || event === 'add') {
64 | try {
65 | // remove mock routes stack
66 | app._router.stack.splice(mockStartIndex, mockRoutesLength)
67 |
68 | // clear routes cache
69 | unregisterRoutes()
70 |
71 | const mockRoutes = registerRoutes(app)
72 | mockRoutesLength = mockRoutes.mockRoutesLength
73 | mockStartIndex = mockRoutes.mockStartIndex
74 |
75 | console.log(chalk.magentaBright(`\n > Mock Server hot reload success! changed ${path}`))
76 | } catch (error) {
77 | console.log(chalk.redBright(error))
78 | }
79 | }
80 | })
81 | }
82 |
--------------------------------------------------------------------------------
/src/components/Share/DropdownMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
11 |
12 |
13 |
39 |
40 |
104 |
--------------------------------------------------------------------------------
/src/views/dashboard/admin/components/BarChart.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
103 |
--------------------------------------------------------------------------------
/src/directive/el-drag-dialog/drag.js:
--------------------------------------------------------------------------------
1 | export default {
2 | bind(el, binding, vnode) {
3 | const dialogHeaderEl = el.querySelector('.el-dialog__header')
4 | const dragDom = el.querySelector('.el-dialog')
5 | dialogHeaderEl.style.cssText += ';cursor:move;'
6 | dragDom.style.cssText += ';top:0px;'
7 |
8 | // 获取原有属性 ie dom元素.currentStyle 火狐谷歌 window.getComputedStyle(dom元素, null);
9 | const getStyle = (function() {
10 | if (window.document.currentStyle) {
11 | return (dom, attr) => dom.currentStyle[attr]
12 | } else {
13 | return (dom, attr) => getComputedStyle(dom, false)[attr]
14 | }
15 | })()
16 |
17 | dialogHeaderEl.onmousedown = (e) => {
18 | // 鼠标按下，计算当前元素距离可视区的距离
19 | const disX = e.clientX - dialogHeaderEl.offsetLeft
20 | const disY = e.clientY - dialogHeaderEl.offsetTop
21 |
22 | const dragDomWidth = dragDom.offsetWidth
23 | const dragDomHeight = dragDom.offsetHeight
24 |
25 | const screenWidth = document.body.clientWidth
26 | const screenHeight = document.body.clientHeight
27 |
28 | const minDragDomLeft = dragDom.offsetLeft
29 | const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth
30 |
31 | const minDragDomTop = dragDom.offsetTop
32 | const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight
33 |
34 | // 获取到的值带px 正则匹配替换
35 | let styL = getStyle(dragDom, 'left')
36 | let styT = getStyle(dragDom, 'top')
37 |
38 | if (styL.includes('%')) {
39 | styL = +document.body.clientWidth * (+styL.replace(/\%/g, '') / 100)
40 | styT = +document.body.clientHeight * (+styT.replace(/\%/g, '') / 100)
41 | } else {
42 | styL = +styL.replace(/\px/g, '')
43 | styT = +styT.replace(/\px/g, '')
44 | }
45 |
46 | document.onmousemove = function(e) {
47 | // 通过事件委托，计算移动的距离
48 | let left = e.clientX - disX
49 | let top = e.clientY - disY
50 |
51 | // 边界处理
52 | if (-(left) > minDragDomLeft) {
53 | left = -minDragDomLeft
54 | } else if (left > maxDragDomLeft) {
55 | left = maxDragDomLeft
56 | }
57 |
58 | if (-(top) > minDragDomTop) {
59 | top = -minDragDomTop
60 | } else if (top > maxDragDomTop) {
61 | top = maxDragDomTop
62 | }
63 |
64 | // 移动当前元素
65 | dragDom.style.cssText += `;left:${left + styL}px;top:${top + styT}px;`
66 |
67 | // emit onDrag event
68 | vnode.child.$emit('dragDialog')
69 | }
70 |
71 | document.onmouseup = function(e) {
72 | document.onmousemove = null
73 | document.onmouseup = null
74 | }
75 | }
76 | },
77 | }
78 |
--------------------------------------------------------------------------------