diff --git a/README.md b/README.md index d45c342e..ed083293 100644 --- a/README.md +++ b/README.md @@ -50,6 +50,7 @@ It is a magical vue admin based on the newest development stack of vue, built-in - Base template recommends using: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) - Desktop: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) +- Typescript: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (Credits: [@Armour](https://github.com/Armour)) **This project does not support low version browsers (e.g. IE). Please add polyfill yourself if you need them.** @@ -128,7 +129,7 @@ Understanding and learning this knowledge in advance will greatly help the use o - Error Log - Dashboard - Guide Page -- Echarts +- ECharts - Clipboard - Markdown to html ``` diff --git a/README.zh-CN.md b/README.zh-CN.md index bc114c3d..ccd136e7 100644 --- a/README.zh-CN.md +++ b/README.zh-CN.md @@ -50,6 +50,7 @@ - 模板建议使用: [vue-admin-template](https://github.com/PanJiaChen/vue-admin-template) - 桌面端: [electron-vue-admin](https://github.com/PanJiaChen/electron-vue-admin) +- Typescript版: [vue-typescript-admin-template](https://github.com/Armour/vue-typescript-admin-template) (鸣谢: [@Armour](https://github.com/Armour)) 群主 **[圈子](https://jianshiapp.com/circles/1209)** 楼主会经常分享一些技术相关的东西，或者加入[qq 群](https://github.com/PanJiaChen/vue-element-admin/issues/602) @@ -140,7 +141,7 @@ - 错误日志 - Dashboard - 引导页 -- Echarts 图表 +- ECharts 图表 - Clipboard(剪贴复制) - Markdown2html ``` @@ -154,7 +155,7 @@ git clone https://github.com/PanJiaChen/vue-element-admin.git # 安装依赖 npm install -# 建议不要用cnpm安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 +# 建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 npm install --registry=https://registry.npm.taobao.org # 启动服务 diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 6220cc6b..01f85732 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -116,7 +116,7 @@ const webpackConfig = merge(baseWebpackConfig, { test: /[\\/]node_modules[\\/]element-ui[\\/]/ }, commons: { - name: 'chunk-comomns', + name: 'chunk-commons', test: resolve('src/components'), // 可自定义拓展你的规则 minChunks: 3, // 最小公用次数 priority: 5, diff --git a/package.json b/package.json index f76574b0..6e71de6f 100644 --- a/package.json +++ b/package.json @@ -50,7 +50,7 @@ "mockjs": "1.0.1-beta3", "normalize.css": "7.0.0", "nprogress": "0.2.0", - "screenfull": "3.3.2", + "screenfull": "3.3.3", "showdown": "1.8.6", "simplemde": "1.11.2", "sortablejs": "1.7.0", @@ -86,7 +86,7 @@ "file-loader": "1.1.11", "friendly-errors-webpack-plugin": "1.7.0", "hash-sum": "1.0.2", - "html-webpack-plugin": "^4.0.0-alpha", + "html-webpack-plugin": "4.0.0-alpha", "husky": "0.14.3", "lint-staged": "7.2.2", "mini-css-extract-plugin": "0.4.1", diff --git a/src/components/Charts/keyboard.vue b/src/components/Charts/keyboard.vue index 15cc3432..857b26ae 100644 --- a/src/components/Charts/keyboard.vue +++ b/src/components/Charts/keyboard.vue @@ -56,6 +56,10 @@ export default { this.chart.setOption( { backgroundColor: '#08263a', + grid: { + left: '5%', + right: '5%' + }, xAxis: [{ show: false, data: xAxisData diff --git a/src/components/Charts/lineMarker.vue b/src/components/Charts/lineMarker.vue index 9f56e613..5d41b022 100644 --- a/src/components/Charts/lineMarker.vue +++ b/src/components/Charts/lineMarker.vue @@ -80,8 +80,8 @@ export default { }, grid: { top: 100, - left: '3%', - right: '4%', + left: '2%', + right: '2%', bottom: '2%', containLabel: true }, diff --git a/src/components/Charts/mixChart.vue b/src/components/Charts/mixChart.vue index 40aee7a0..a8e271ca 100644 --- a/src/components/Charts/mixChart.vue +++ b/src/components/Charts/mixChart.vue @@ -75,8 +75,10 @@ export default { } }, grid: { + left: '5%', + right: '5%', borderWidth: 0, - top: 110, + top: 150, bottom: 95, textStyle: { color: '#fff' diff --git a/src/components/Charts/mixins/resize.js b/src/components/Charts/mixins/resize.js index 254e9052..dc61f859 100644 --- a/src/components/Charts/mixins/resize.js +++ b/src/components/Charts/mixins/resize.js @@ -2,14 +2,27 @@ import { debounce } from '@/utils' export default { mounted() { - this.__resizeHanlder = debounce(() => { + this.__resizeHandler = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) - window.addEventListener('resize', this.__resizeHanlder) + window.addEventListener('resize', this.__resizeHandler) + + const sidebarElm = document.getElementsByClassName('sidebar-container')[0] + sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) }, beforeDestroy() { - window.removeEventListener('resize', this.__resizeHanlder) + window.removeEventListener('resize', this.__resizeHandler) + + const sidebarElm = document.getElementsByClassName('sidebar-container')[0] + sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) + }, + methods: { + sidebarResizeHandler(e) { + if (e.propertyName === 'width') { + this.__resizeHandler() + } + } } } diff --git a/src/components/Tinymce/components/editorImage.vue b/src/components/Tinymce/components/editorImage.vue index f4e0a237..bcd82099 100644 --- a/src/components/Tinymce/components/editorImage.vue +++ b/src/components/Tinymce/components/editorImage.vue @@ -49,7 +49,6 @@ export default { this.$message('请等待所有图片上传成功 或 出现了网络问题，请刷新页面重新上传！') return } - console.log(arr) this.$emit('successCBK', arr) this.listObj = {} this.fileList = [] diff --git a/src/components/UploadExcel/index.vue b/src/components/UploadExcel/index.vue index 909c3b4a..261bea38 100644 --- a/src/components/UploadExcel/index.vue +++ b/src/components/UploadExcel/index.vue @@ -26,7 +26,7 @@ export default { } }, methods: { - generateDate({ header, results }) { + generateData({ header, results }) { this.excelData.header = header this.excelData.results = results this.onSuccess && this.onSuccess(this.excelData) @@ -82,20 +82,20 @@ export default { const reader = new FileReader() reader.onload = e => { const data = e.target.result - const fixedData = this.fixdata(data) + const fixedData = this.fixData(data) const workbook = XLSX.read(btoa(fixedData), { type: 'base64' }) const firstSheetName = workbook.SheetNames[0] const worksheet = workbook.Sheets[firstSheetName] - const header = this.get_header_row(worksheet) + const header = this.getHeaderRow(worksheet) const results = XLSX.utils.sheet_to_json(worksheet) - this.generateDate({ header, results }) + this.generateData({ header, results }) this.loading = false resolve() } reader.readAsArrayBuffer(rawFile) }) }, - fixdata(data) { + fixData(data) { let o = '' let l = 0 const w = 10240 @@ -103,14 +103,16 @@ export default { o += String.fromCharCode.apply(null, new Uint8Array(data.slice(l * w))) return o }, - get_header_row(sheet) { + getHeaderRow(sheet) { const headers = [] const range = XLSX.utils.decode_range(sheet['!ref']) let C - const R = range.s.r /* start in the first row */ + const R = range.s.r + /* start in the first row */ for (C = range.s.c; C <= range.e.c; ++C) { /* walk every column in the range */ - var cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] /* find the cell in the first row */ - var hdr = 'UNKNOWN ' + C // <-- replace with your desired default + const cell = sheet[XLSX.utils.encode_cell({ c: C, r: R })] + /* find the cell in the first row */ + let hdr = 'UNKNOWN ' + C // <-- replace with your desired default if (cell && cell.t) hdr = XLSX.utils.format_cell(cell) headers.push(hdr) } diff --git a/src/directive/clipboard/clipboard.js b/src/directive/clipboard/clipboard.js index 49c9b391..514aad20 100644 --- a/src/directive/clipboard/clipboard.js +++ b/src/directive/clipboard/clipboard.js @@ -1,7 +1,7 @@ // Inspired by https://github.com/Inndy/vue-clipboard2 const Clipboard = require('clipboard') if (!Clipboard) { - throw new Error('you shold npm install `clipboard` --save at first ') + throw new Error('you should npm install `clipboard` --save at first ') } export default { diff --git a/src/directive/el-dragDialog/drag.js b/src/directive/el-dragDialog/drag.js index 68e08523..58e29110 100644 --- a/src/directive/el-dragDialog/drag.js +++ b/src/directive/el-dragDialog/drag.js @@ -20,7 +20,7 @@ export default{ const disY = e.clientY - dialogHeaderEl.offsetTop const dragDomWidth = dragDom.offsetWidth - const dragDomheight = dragDom.offsetHeight + const dragDomHeight = dragDom.offsetHeight const screenWidth = document.body.clientWidth const screenHeight = document.body.clientHeight @@ -29,7 +29,7 @@ export default{ const maxDragDomLeft = screenWidth - dragDom.offsetLeft - dragDomWidth const minDragDomTop = dragDom.offsetTop - const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomheight + const maxDragDomTop = screenHeight - dragDom.offsetTop - dragDomHeight // 获取到的值带px 正则匹配替换 let styL = getStyle(dragDom, 'left') diff --git a/src/directive/waves/waves.js b/src/directive/waves/waves.js index 83070113..a77f876e 100644 --- a/src/directive/waves/waves.js +++ b/src/directive/waves/waves.js @@ -6,7 +6,7 @@ export default{ const customOpts = Object.assign({}, binding.value) const opts = Object.assign({ ele: el, // 波纹作用元素 - type: 'hit', // hit点击位置扩散center中心点扩展 + type: 'hit', // hit 点击位置扩散 center中心点扩展 color: 'rgba(0, 0, 0, 0.15)' // 波纹颜色 }, customOpts) const target = opts.ele diff --git a/src/filters/index.js b/src/filters/index.js index 47ef2aa2..b164513a 100644 --- a/src/filters/index.js +++ b/src/filters/index.js @@ -37,6 +37,6 @@ export function numberFormatter(num, digits) { return num.toString() } -export function toThousandslsFilter(num) { +export function toThousandFilter(num) { return (+num || 0).toString().replace(/^-?\d+/g, m => m.replace(/(?=(?!\b)(\d{3})+$)/g, ',')) } diff --git a/src/icons/index.js b/src/icons/index.js index 2d689240..c1c2e792 100644 --- a/src/icons/index.js +++ b/src/icons/index.js @@ -1,12 +1,9 @@ import Vue from 'vue' import SvgIcon from '@/components/SvgIcon'// svg组件 -import generateIconsView from '@/views/svg-icons/generateIconsView.js'// just for @/views/icons , you can delete it // register globally Vue.component('svg-icon', SvgIcon) -const requireAll = requireContext => requireContext.keys().map(requireContext) const req = require.context('./svg', false, /\.svg$/) -const iconMap = requireAll(req) - -generateIconsView.generate(iconMap) // just for @/views/icons , you can delete it +const requireAll = requireContext => requireContext.keys().map(requireContext) +requireAll(req) diff --git a/src/permission.js b/src/permission.js index 22522832..81f9d113 100644 --- a/src/permission.js +++ b/src/permission.js @@ -14,7 +14,7 @@ function hasPermission(roles, permissionRoles) { return roles.some(role => permissionRoles.indexOf(role) >= 0) } -const whiteList = ['/login', '/authredirect']// no redirect whitelist +const whiteList = ['/login', '/auth-redirect']// no redirect whitelist router.beforeEach((to, from, next) => { NProgress.start() // start progress bar @@ -52,7 +52,7 @@ router.beforeEach((to, from, next) => { if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 next() } else { - next('/login') // 否则全部重定向到登录页 + next(`/login?redirect=${to.path}`) // 否则全部重定向到登录页 NProgress.done() // if current page is login will not trigger afterEach hook, so manually handle it } } diff --git a/src/router/index.js b/src/router/index.js index 5490185b..ab328c46 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -12,7 +12,7 @@ import chartsRouter from './modules/charts' import tableRouter from './modules/table' import nestedRouter from './modules/nested' -/** note: submenu only apppear when children.length>=1 +/** note: Submenu only appear when children.length>=1 * detail see https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html **/ @@ -21,7 +21,7 @@ import nestedRouter from './modules/nested' * alwaysShow: true if set true, will always show the root menu, whatever its child routes length * if not set alwaysShow, only more than one route under the children * it will becomes nested mode, otherwise not show the root menu -* redirect: noredirect if `redirect:noredirect` will no redirct in the breadcrumb +* redirect: noredirect if `redirect:noredirect` will no redirect in the breadcrumb * name:'router-name' the name is used by (must set!!!) * meta : { roles: ['admin','editor'] will control the page roles (you can set multiple roles) @@ -48,7 +48,7 @@ export const constantRouterMap = [ hidden: true }, { - path: '/authredirect', + path: '/auth-redirect', component: () => import('@/views/login/authredirect'), hidden: true }, diff --git a/src/store/modules/tagsView.js b/src/store/modules/tagsView.js index 81ef59b1..f2faeb12 100644 --- a/src/store/modules/tagsView.js +++ b/src/store/modules/tagsView.js @@ -23,7 +23,6 @@ const tagsView = { for (const [i, v] of state.visitedViews.entries()) { if (v.path === view.path) { state.visitedViews.splice(i, 1) - console.log('1') break } } diff --git a/src/styles/sidebar.scss b/src/styles/sidebar.scss index 8e6db3b9..fd922526 100644 --- a/src/styles/sidebar.scss +++ b/src/styles/sidebar.scss @@ -28,6 +28,9 @@ height: 100%; } } + .el-scrollbar__bar.is-vertical{ + right: 0px; + } .is-horizontal { display: none; } diff --git a/src/utils/index.js b/src/utils/index.js index 43a374e4..f607910c 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -169,7 +169,6 @@ export function scrollTo(element, to, duration) { const difference = to - element.scrollTop const perTick = (difference / duration) * 10 setTimeout(() => { - console.log(new Date()) element.scrollTop = element.scrollTop + perTick if (element.scrollTop === to) return scrollTo(element, to, duration - 10) diff --git a/src/utils/request.js b/src/utils/request.js index 5ce53933..50f9ecec 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -5,7 +5,7 @@ import { getToken } from '@/utils/auth' // create an axios instance const service = axios.create({ - baseURL: process.env.BASE_API, // api的base_url + baseURL: process.env.BASE_API, // api 的 base_url timeout: 5000 // request timeout }) @@ -26,13 +26,13 @@ service.interceptors.request.use( } ) -// respone interceptor +// response interceptor service.interceptors.response.use( response => response, /** * 下面的注释为通过在response里，自定义code来标示请求状态 * 当code返回如下情况则说明权限有问题，登出并返回到登录页 - * 如想通过xmlhttprequest来状态码标识 逻辑可写在下面error中 + * 如想通过 xmlhttprequest 来状态码标识 逻辑可写在下面error中 * 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除 */ // response => { diff --git a/src/views/charts/keyboard.vue b/src/views/charts/keyboard.vue index 98087ab0..3ea21397 100644 --- a/src/views/charts/keyboard.vue +++ b/src/views/charts/keyboard.vue @@ -16,9 +16,8 @@ export default { diff --git a/src/views/charts/line.vue b/src/views/charts/line.vue index da0b5bba..2034d4c7 100644 --- a/src/views/charts/line.vue +++ b/src/views/charts/line.vue @@ -16,9 +16,8 @@ export default { diff --git a/src/views/charts/mixChart.vue b/src/views/charts/mixChart.vue index 568bae7b..7ccc7fa0 100644 --- a/src/views/charts/mixChart.vue +++ b/src/views/charts/mixChart.vue @@ -16,9 +16,8 @@ export default { diff --git a/src/views/clipboard/index.vue b/src/views/clipboard/index.vue index 0a4c63f2..607dfb66 100644 --- a/src/views/clipboard/index.vue +++ b/src/views/clipboard/index.vue @@ -2,11 +2,11 @@
- + copy - + copy diff --git a/src/views/dashboard/admin/components/BarChart.vue b/src/views/dashboard/admin/components/BarChart.vue index a694f2b9..28e0aef9 100644 --- a/src/views/dashboard/admin/components/BarChart.vue +++ b/src/views/dashboard/admin/components/BarChart.vue @@ -31,18 +31,18 @@ export default { }, mounted() { this.initChart() - this.__resizeHanlder = debounce(() => { + this.__resizeHandler = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) - window.addEventListener('resize', this.__resizeHanlder) + window.addEventListener('resize', this.__resizeHandler) }, beforeDestroy() { if (!this.chart) { return } - window.removeEventListener('resize', this.__resizeHanlder) + window.removeEventListener('resize', this.__resizeHandler) this.chart.dispose() this.chart = null }, diff --git a/src/views/dashboard/admin/components/LineChart.vue b/src/views/dashboard/admin/components/LineChart.vue index 6c6637a8..ef493c4b 100644 --- a/src/views/dashboard/admin/components/LineChart.vue +++ b/src/views/dashboard/admin/components/LineChart.vue @@ -46,33 +46,38 @@ export default { mounted() { this.initChart() if (this.autoResize) { - this.__resizeHanlder = debounce(() => { + this.__resizeHandler = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) - window.addEventListener('resize', this.__resizeHanlder) + window.addEventListener('resize', this.__resizeHandler) } // 监听侧边栏的变化 const sidebarElm = document.getElementsByClassName('sidebar-container')[0] - sidebarElm.addEventListener('transitionend', this.__resizeHanlder) + sidebarElm.addEventListener('transitionend', this.sidebarResizeHandler) }, beforeDestroy() { if (!this.chart) { return } if (this.autoResize) { - window.removeEventListener('resize', this.__resizeHanlder) + window.removeEventListener('resize', this.__resizeHandler) } const sidebarElm = document.getElementsByClassName('sidebar-container')[0] - sidebarElm.removeEventListener('transitionend', this.__resizeHanlder) + sidebarElm.removeEventListener('transitionend', this.sidebarResizeHandler) this.chart.dispose() this.chart = null }, methods: { + sidebarResizeHandler(e) { + if (e.propertyName === 'width') { + this.__resizeHandler() + } + }, setOptions({ expectedData, actualData } = {}) { this.chart.setOption({ xAxis: { diff --git a/src/views/dashboard/admin/components/PieChart.vue b/src/views/dashboard/admin/components/PieChart.vue index 02999cd3..edb17d54 100644 --- a/src/views/dashboard/admin/components/PieChart.vue +++ b/src/views/dashboard/admin/components/PieChart.vue @@ -29,18 +29,18 @@ export default { }, mounted() { this.initChart() - this.__resizeHanlder = debounce(() => { + this.__resizeHandler = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) - window.addEventListener('resize', this.__resizeHanlder) + window.addEventListener('resize', this.__resizeHandler) }, beforeDestroy() { if (!this.chart) { return } - window.removeEventListener('resize', this.__resizeHanlder) + window.removeEventListener('resize', this.__resizeHandler) this.chart.dispose() this.chart = null }, diff --git a/src/views/dashboard/admin/components/RaddarChart.vue b/src/views/dashboard/admin/components/RaddarChart.vue index e30b9770..11fde329 100644 --- a/src/views/dashboard/admin/components/RaddarChart.vue +++ b/src/views/dashboard/admin/components/RaddarChart.vue @@ -31,18 +31,18 @@ export default { }, mounted() { this.initChart() - this.__resizeHanlder = debounce(() => { + this.__resizeHandler = debounce(() => { if (this.chart) { this.chart.resize() } }, 100) - window.addEventListener('resize', this.__resizeHanlder) + window.addEventListener('resize', this.__resizeHandler) }, beforeDestroy() { if (!this.chart) { return } - window.removeEventListener('resize', this.__resizeHanlder) + window.removeEventListener('resize', this.__resizeHandler) this.chart.dispose() this.chart = null }, diff --git a/src/views/dashboard/admin/components/TransactionTable.vue b/src/views/dashboard/admin/components/TransactionTable.vue index bcbfbb43..07417523 100644 --- a/src/views/dashboard/admin/components/TransactionTable.vue +++ b/src/views/dashboard/admin/components/TransactionTable.vue @@ -7,7 +7,7 @@ diff --git a/src/views/documentation/index.vue b/src/views/documentation/index.vue index d40c2b67..4c7afc9d 100644 --- a/src/views/documentation/index.vue +++ b/src/views/documentation/index.vue @@ -35,7 +35,6 @@ export default { .document-btn { float: left; margin-left: 50px; - vertical-align: middle; display: block; cursor: pointer; background: black; diff --git a/src/views/errorPage/401.vue b/src/views/errorPage/401.vue index d43be52d..24420126 100644 --- a/src/views/errorPage/401.vue +++ b/src/views/errorPage/401.vue @@ -53,6 +53,7 @@ export default {