3 |
4 |
5 |
6 |
9 |
10 |
11 |
12 |
13 |
14 |
44 |
--------------------------------------------------------------------------------
/main-app/src/icons/svg/eye-open.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/main-app/src/utils/open-window.js:
--------------------------------------------------------------------------------
1 | /**
2 | *Created by PanJiaChen on 16/11/29.
3 | * @param {Sting} url
4 | * @param {Sting} title
5 | * @param {Number} w
6 | * @param {Number} h
7 | */
8 | export default function openWindow(url, title, w, h) {
9 | // Fixes dual-screen position Most browsers Firefox
10 | const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left
11 | const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top
12 |
13 | const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width
14 | const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height
15 |
16 | const left = ((width / 2) - (w / 2)) + dualScreenLeft
17 | const top = ((height / 2) - (h / 2)) + dualScreenTop
18 | const newWindow = window.open(url, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=yes, copyhistory=no, width=' + w + ', height=' + h + ', top=' + top + ', left=' + left)
19 |
20 | // Puts focus on the newWindow
21 | if (window.focus) {
22 | newWindow.focus()
23 | }
24 | }
25 |
26 |
--------------------------------------------------------------------------------
/sidemenu-app/src/icons/svg/eye-open.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/main-app/mock/remote-search.js:
--------------------------------------------------------------------------------
1 | import Mock from 'mockjs'
2 |
3 | const NameList = []
4 | const count = 100
5 |
6 | for (let i = 0; i < count; i++) {
7 | NameList.push(Mock.mock({
8 | name: '@first'
9 | }))
10 | }
11 | NameList.push({ name: 'mock-Pan' })
12 |
13 | export default [
14 | // username search
15 | {
16 | url: '/search/user',
17 | type: 'get',
18 | response: config => {
19 | const { name } = config.query
20 | const mockNameList = NameList.filter(item => {
21 | const lowerCaseName = item.name.toLowerCase()
22 | return !(name && lowerCaseName.indexOf(name.toLowerCase()) < 0)
23 | })
24 | return {
25 | code: 20000,
26 | data: { items: mockNameList }
27 | }
28 | }
29 | },
30 |
31 | // transaction list
32 | {
33 | url: '/transaction/list',
34 | type: 'get',
35 | response: _ => {
36 | return {
37 | code: 20000,
38 | data: {
39 | total: 20,
40 | 'items|20': [{
41 | order_no: '@guid()',
42 | timestamp: +Mock.Random.date('T'),
43 | username: '@name()',
44 | price: '@float(1000, 15000, 0, 2)',
45 | 'status|1': ['success', 'pending']
46 | }]
47 | }
48 | }
49 | }
50 | }
51 | ]
52 |
--------------------------------------------------------------------------------
/main-app/src/components/Screenfull/index.vue:
--------------------------------------------------------------------------------
1 |
2 | {{ item.title }}
7 |{{ item.content }}
8 |
3 |
5 |
6 |
7 |
50 |
51 |
61 |
--------------------------------------------------------------------------------
/main-app/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 | beforeDestroy() {
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 | }
--------------------------------------------------------------------------------
/main-app/src/directive/el-table/adaptive.js:
--------------------------------------------------------------------------------
1 | import { addResizeListener, removeResizeListener } from 'element-ui/src/utils/resize-event'
2 |
3 | /**
4 | * How to use
5 | *
6 |
18 |
19 |
20 |
21 |
37 |
38 |
50 |
--------------------------------------------------------------------------------
/nav-app/src/components/Hamburger/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
18 |
19 |
20 |
21 |
37 |
38 |
50 |
--------------------------------------------------------------------------------
/main-app/plop-templates/view/prompt.js:
--------------------------------------------------------------------------------
1 | const { notEmpty } = require('../utils.js')
2 |
3 | module.exports = {
4 | description: 'generate a view',
5 | prompts: [{
6 | type: 'input',
7 | name: 'name',
8 | message: 'view name please',
9 | validate: notEmpty('name')
10 | },
11 | {
12 | type: 'checkbox',
13 | name: 'blocks',
14 | message: 'Blocks:',
15 | choices: [{
16 | name: '',
17 | value: 'template',
18 | checked: true
19 | },
20 | {
21 | name: '
56 |
--------------------------------------------------------------------------------
/main-app/src/components/SvgIcon/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
47 |
48 |
63 |
--------------------------------------------------------------------------------
/sidemenu-app/src/components/SvgIcon/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
8 |
47 |
48 |
63 |
--------------------------------------------------------------------------------
/main-app/src/styles/mixin.scss:
--------------------------------------------------------------------------------
1 | @mixin clearfix {
2 | &:after {
3 | content: "";
4 | display: table;
5 | clear: both;
6 | }
7 | }
8 |
9 | @mixin scrollBar {
10 | &::-webkit-scrollbar-track-piece {
11 | background: #d3dce6;
12 | }
13 |
14 | &::-webkit-scrollbar {
15 | width: 6px;
16 | }
17 |
18 | &::-webkit-scrollbar-thumb {
19 | background: #99a9bf;
20 | border-radius: 20px;
21 | }
22 | }
23 |
24 | @mixin relative {
25 | position: relative;
26 | width: 100%;
27 | height: 100%;
28 | }
29 |
30 | @mixin pct($pct) {
31 | width: #{$pct};
32 | position: relative;
33 | margin: 0 auto;
34 | }
35 |
36 | @mixin triangle($width, $height, $color, $direction) {
37 | $width: $width/2;
38 | $color-border-style: $height solid $color;
39 | $transparent-border-style: $width solid transparent;
40 | height: 0;
41 | width: 0;
42 |
43 | @if $direction==up {
44 | border-bottom: $color-border-style;
45 | border-left: $transparent-border-style;
46 | border-right: $transparent-border-style;
47 | }
48 |
49 | @else if $direction==right {
50 | border-left: $color-border-style;
51 | border-top: $transparent-border-style;
52 | border-bottom: $transparent-border-style;
53 | }
54 |
55 | @else if $direction==down {
56 | border-top: $color-border-style;
57 | border-left: $transparent-border-style;
58 | border-right: $transparent-border-style;
59 | }
60 |
61 | @else if $direction==left {
62 | border-right: $color-border-style;
63 | border-top: $transparent-border-style;
64 | border-bottom: $transparent-border-style;
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/main-app/src/components/SizeSelect/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
6 |
3 |
29 |
30 |
31 |
69 |
--------------------------------------------------------------------------------
/sidemenu-app/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
24 |
25 |
59 |
--------------------------------------------------------------------------------
/main-app/src/utils/request.js:
--------------------------------------------------------------------------------
1 | import axios from 'axios'
2 | import { MessageBox, Message } from 'element-ui'
3 | import store from '@/store'
4 | import { getToken } from '@/utils/auth'
5 |
6 | // create an axios instance
7 | const service = axios.create({
8 | baseURL: process.env.VUE_APP_BASE_API,
9 | timeout: 5000
10 | })
11 |
12 | // request interceptor
13 | service.interceptors.request.use(
14 | config => {
15 | if (store.getters.token) {
16 | config.headers['X-Token'] = getToken()
17 | }
18 | return config
19 | },
20 | error => {
21 | console.log(error) // for debug
22 | return Promise.reject(error)
23 | }
24 | )
25 |
26 | // response interceptor
27 | service.interceptors.response.use(
28 | response => {
29 | const res = response.data
30 | if (res.code !== 20000) {
31 | Message({
32 | message: res.message || 'Error',
33 | type: 'error',
34 | duration: 5 * 1000
35 | })
36 | if (res.code === 50008 || res.code === 50012 || res.code === 50014) {
37 | MessageBox.confirm('You have been logged out, you can cancel to stay on this page, or log in again', 'Confirm logout', {
38 | confirmButtonText: 'Re-Login',
39 | cancelButtonText: 'Cancel',
40 | type: 'warning'
41 | }).then(() => {
42 | store.dispatch('user/resetToken').then(() => {
43 | location.reload()
44 | })
45 | })
46 | }
47 | return Promise.reject(new Error(res.message || 'Error'))
48 | } else {
49 | return res
50 | }
51 | },
52 | error => {
53 | console.log('err' + error) // for debug
54 | Message({
55 | message: error.message,
56 | type: 'error',
57 | duration: 5 * 1000
58 | })
59 | return Promise.reject(error)
60 | }
61 | )
62 |
63 | export default service
64 |
--------------------------------------------------------------------------------
/main-app/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 | }
8 | },
9 | mounted() {
10 | this.$_initResizeEvent()
11 | this.$_initSidebarResizeEvent()
12 | },
13 | beforeDestroy() {
14 | this.$_destroyResizeEvent()
15 | this.$_destroySidebarResizeEvent()
16 | },
17 | // to fixed bug when cached by keep-alive
18 | // https://github.com/PanJiaChen/vue-element-admin/issues/2116
19 | activated() {
20 | this.$_initResizeEvent()
21 | this.$_initSidebarResizeEvent()
22 | },
23 | deactivated() {
24 | this.$_destroyResizeEvent()
25 | this.$_destroySidebarResizeEvent()
26 | },
27 | methods: {
28 | // use $_ for mixins properties
29 | // https://vuejs.org/v2/style-guide/index.html#Private-property-names-essential
30 | $_resizeHandler() {
31 | return debounce(() => {
32 | if (this.chart) {
33 | this.chart.resize()
34 | }
35 | }, 100)()
36 | },
37 | $_initResizeEvent() {
38 | window.addEventListener('resize', this.$_resizeHandler)
39 | },
40 | $_destroyResizeEvent() {
41 | window.removeEventListener('resize', this.$_resizeHandler)
42 | },
43 | $_sidebarResizeHandler(e) {
44 | if (e.propertyName === 'width') {
45 | this.$_resizeHandler()
46 | }
47 | },
48 | $_initSidebarResizeEvent() {
49 | this.$_sidebarElm = document.getElementsByClassName('sidebar-container')[0]
50 | this.$_sidebarElm && this.$_sidebarElm.addEventListener('transitionend', this.$_sidebarResizeHandler)
51 | },
52 | $_destroySidebarResizeEvent() {
53 | this.$_sidebarElm && this.$_sidebarElm.removeEventListener('transitionend', this.$_sidebarResizeHandler)
54 | }
55 | }
56 | }
57 |
--------------------------------------------------------------------------------
/main-app/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 |
--------------------------------------------------------------------------------
/main-app/mock/user.js:
--------------------------------------------------------------------------------
1 | const tokens = {
2 | admin: {
3 | token: 'admin-token'
4 | },
5 | editor: {
6 | token: 'editor-token'
7 | }
8 | }
9 |
10 | const users = {
11 | 'admin-token': {
12 | roles: ['admin'],
13 | introduction: 'I am a super administrator',
14 | avatar:
15 | '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:
22 | 'https://wpimg.wallstcn.com/f778738c-e4f8-4870-b634-56703b4acafe.gif',
23 | name: 'Normal Editor'
24 | }
25 | }
26 |
27 | export default [
28 | // user login
29 | {
30 | url: '/user/login',
31 | type: 'get',
32 | response: config => {
33 | const { username } = config.query
34 | const token = tokens[username]
35 |
36 | // mock error
37 | if (!token) {
38 | return {
39 | code: 60204,
40 | message: 'Account and password are incorrect.'
41 | }
42 | }
43 |
44 | return {
45 | code: 20000,
46 | data: token
47 | }
48 | }
49 | },
50 |
51 | // get user info
52 | {
53 | url: '/user/info.*',
54 | type: 'get',
55 | response: config => {
56 | const { token } = config.query
57 | const info = users[token]
58 |
59 | // mock error
60 | if (!info) {
61 | return {
62 | code: 50008,
63 | message: 'Login failed, unable to get user details.'
64 | }
65 | }
66 |
67 | return {
68 | code: 20000,
69 | data: info
70 | }
71 | }
72 | },
73 |
74 | // user logout
75 | {
76 | url: '/user/logout',
77 | type: 'get',
78 | response: _ => {
79 | return {
80 | code: 20000,
81 | data: 'success'
82 | }
83 | }
84 | }
85 | ]
86 |
--------------------------------------------------------------------------------
/main-app/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 |
--------------------------------------------------------------------------------
/main-app/src/views/dashboard/admin/index.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
5 |
6 |
7 |
9 |
10 |
11 |
12 |
13 |
14 |
16 |
17 |
19 |
20 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
4 |
10 |
11 |
12 |
13 |
22 |
3 |
18 |
19 |
20 |
42 |
43 |
75 |
--------------------------------------------------------------------------------
4 |
5 | Your roles:
6 | {{ item }}
7 |
8 |
14 |
10 | {{ name }}
11 | Editor's Dashboard
12 |
13 |
15 | ![]()
16 |
17 |