diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index da44b65..7b01b9f 100644 --- a/build/webpack.prod.conf.js +++ b/build/webpack.prod.conf.js @@ -11,6 +11,10 @@ var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') var env = config.build.env +function resolveApp(relativePath) { + return path.resolve(relativePath); +} + var webpackConfig = merge(baseWebpackConfig, { module: { rules: utils.styleLoaders({ @@ -53,6 +57,7 @@ var webpackConfig = merge(baseWebpackConfig, { filename: config.build.index, template: 'index.html', inject: true, + favicon: resolveApp('favicon.ico'), minify: { removeComments: true, collapseWhitespace: true, diff --git a/favicon.ico b/favicon.ico new file mode 100644 index 0000000..7cd39d7 Binary files /dev/null and b/favicon.ico differ diff --git a/src/components/Hamburger/index.vue b/src/components/Hamburger/index.vue index fc33037..8045ac2 100644 --- a/src/components/Hamburger/index.vue +++ b/src/components/Hamburger/index.vue @@ -1,6 +1,6 @@ diff --git a/src/components/Icon-svg/index.js b/src/components/Icon-svg/index.js deleted file mode 100644 index 55d342a..0000000 --- a/src/components/Icon-svg/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import Vue from 'vue' - -function registerAllComponents(requireContext) { - return requireContext.keys().forEach(comp => { - const vueComp = requireContext(comp) - const compName = vueComp.name ? vueComp.name.toLowerCase() : /\/([\w-]+)\.vue$/.exec(comp)[1] - Vue.component(compName, vueComp) - }) -} - -registerAllComponents(require.context('./', false, /\.vue$/)) diff --git a/src/components/Icon-svg/wscn-icon-svg.vue b/src/components/Icon-svg/index.vue similarity index 72% rename from src/components/Icon-svg/wscn-icon-svg.vue rename to src/components/Icon-svg/index.vue index 04b01f4..44881b1 100644 --- a/src/components/Icon-svg/wscn-icon-svg.vue +++ b/src/components/Icon-svg/index.vue @@ -1,12 +1,12 @@ - - diff --git a/src/components/Icon-svg/wscn-icon-stack.vue b/src/components/Icon-svg/wscn-icon-stack.vue deleted file mode 100644 index bf7b07e..0000000 --- a/src/components/Icon-svg/wscn-icon-stack.vue +++ /dev/null @@ -1,52 +0,0 @@ - - - - - diff --git a/src/main.js b/src/main.js index 14ed8a6..721e4a8 100644 --- a/src/main.js +++ b/src/main.js @@ -4,31 +4,32 @@ import Vue from 'vue' import App from './App' import router from './router' import store from './store' -import ElementUI from 'element-ui'; +import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' import NProgress from 'nprogress' -import 'normalize.css/normalize.css';// normalize.css 样式格式化 -import '@/styles/index.scss'; // 全局自定义的css样式 -import '@/components/Icon-svg/index'; // 封装的svg组件 +import 'normalize.css/normalize.css' +import '@/styles/index.scss' // 全局自定义的css样式 +import '@/assets/iconfont/iconfont' +import IconSvg from '@/components/Icon-svg/index.vue' Vue.config.productionTip = false Vue.use(ElementUI); +Vue.component('icon-svg', IconSvg) - -const whiteList = ['/login'];// 不重定向白名单 +const whiteList = ['/login']; router.beforeEach((to, from, next) => { - NProgress.start(); // 开启Progress - if (store.getters.token) { // 判断是否有token + NProgress.start(); + if (store.getters.token) { if (to.path === '/login') { next({ path: '/' }); } else { - if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息 - store.dispatch('GetInfo').then(res => { // 拉取user_info + if (store.getters.roles.length === 0) { + store.dispatch('GetInfo').then(res => { const roles = res.data.role; - store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表 - router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表 - next(to.path); // hack方法 确保addRoutes已完成 + store.dispatch('GenerateRoutes', { roles }).then(() => { + router.addRoutes(store.getters.addRouters) + next(to.path); }) }).catch(err => { console.log(err); @@ -38,10 +39,10 @@ router.beforeEach((to, from, next) => { } } } else { - if (whiteList.indexOf(to.path) !== -1) { // 在免登录白名单，直接进入 + if (whiteList.indexOf(to.path) !== -1) { next() } else { - next('/login'); // 否则全部重定向到登录页 + next('/login'); NProgress.done(); } } diff --git a/src/store/getters.js b/src/store/getters.js index 71c9e6b..8553cd8 100644 --- a/src/store/getters.js +++ b/src/store/getters.js @@ -1,12 +1,8 @@ const getters = { sidebar: state => state.app.sidebar, - visitedViews: state => state.app.visitedViews, token: state => state.user.token, avatar: state => state.user.avatar, name: state => state.user.name, - uid: state => state.user.uid, - email: state => state.user.email, - introduction: state => state.user.introduction, roles: state => state.user.roles, permission_routers: state => state.permission.routers, addRouters: state => state.permission.addRouters diff --git a/src/styles/btn.scss b/src/styles/btn.scss deleted file mode 100644 index edd2f31..0000000 --- a/src/styles/btn.scss +++ /dev/null @@ -1,103 +0,0 @@ -$blue:#324157; -$light-blue:#3A71A8; -$red:#C03639; -$pink: #E65D6E; -$green: #30B08F; -$tiffany: #4AB7BD; -$yellow:#FEC171; - -$panGreen: #30B08F; - -@mixin colorBtn($color) { - background: $color; - &:hover { - color: $color; - &:before, &:after { - background: $color; - } - } -} - - -.blue-btn { - @include colorBtn($blue) -} - -.light-blue-btn{ - @include colorBtn($light-blue) -} - - -.red-btn { - @include colorBtn($red) -} - -.pink-btn { - @include colorBtn($pink) -} - -.green-btn { - @include colorBtn($green) -} - - -.tiffany-btn { - @include colorBtn($tiffany) -} - - -.yellow-btn { - @include colorBtn($yellow) -} - -.pan-btn { - font-size: 14px; - color: #fff; - padding: 14px 36px; - border-radius: 8px; - border: none; - outline: none; - margin-right: 25px; - transition: 600ms ease all; - position: relative; - display: inline-block; - &:hover { - background: #fff; - &:before, &:after { - width: 100%; - transition: 600ms ease all; - } - } - &:before, &:after { - content: ''; - position: absolute; - top: 0; - right: 0; - height: 2px; - width: 0; - transition: 400ms ease all; - } - &::after { - right: inherit; - top: inherit; - left: 0; - bottom: 0; - } -} - -.custom-button{ - display: inline-block; - line-height: 1; - white-space: nowrap; - cursor: pointer; - background: #fff; - color: #fff; - -webkit-appearance: none; - text-align: center; - box-sizing: border-box; - outline: 0; - margin: 0; - padding: 10px 15px; - font-size: 14px; - border-radius: 4px; -} diff --git a/src/styles/element-ui.scss b/src/styles/element-ui.scss index 382aff1..c618f7d 100644 --- a/src/styles/element-ui.scss +++ b/src/styles/element-ui.scss @@ -1,23 +1,4 @@ - //覆盖一些element-ui样式 -.block-checkbox { - display: block; -} - -.operation-container { - .cell { - padding: 10px !important; - } - .el-button { - &:nth-child(3) { - margin-top: 10px; - margin-left: 0px; - } - &:nth-child(4) { - margin-top: 10px; - } - } -} - + //覆盖一些element-ui样式 覆盖css样式可在这里添加 .el-upload { input[type="file"] { display: none !important; @@ -28,29 +9,6 @@ display: none; } -.cell { - .el-tag { - margin-right: 8px; - } -} - -.small-padding { - .cell { - padding-left: 8px; - padding-right: 8px; - } -} - -.status-col { - .cell { - padding: 0 10px; - text-align: center; - .el-tag { - margin-right: 0px; - } - } -} - //暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 .el-dialog { transform: none; @@ -59,18 +17,6 @@ margin: 0 auto; } - -//文章页textarea修改样式 -.article-textarea { - textarea { - padding-right: 40px; - resize: none; - border: none; - border-radius: 0px; - border-bottom: 1px solid #bfcbd9; - } -} - //element ui upload .upload-container { .el-upload { diff --git a/src/styles/index.scss b/src/styles/index.scss index e566c38..6dad036 100644 --- a/src/styles/index.scss +++ b/src/styles/index.scss @@ -1,4 +1,3 @@ -@import './btn.scss'; @import './element-ui.scss'; @import "./mixin.scss"; body { @@ -8,10 +7,6 @@ body { font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif; } -label { - font-weight: 700; -} - html { box-sizing: border-box; } @@ -22,14 +17,6 @@ html { box-sizing: inherit; } -.no-padding { - padding: 0px !important; -} - -.padding-content { - padding: 4px 0; -} - a:focus, a:active { outline: none; @@ -43,145 +30,6 @@ a:hover { text-decoration: none; } -.fr { - float: right; -} - -.fl { - float: left; -} - -.pr-5 { - padding-right: 5px; -} - -.pl-5 { - padding-left: 5px; -} - -.block { - display: block; -} - -.pointer { - cursor: pointer; -} - -.inlineBlock { - display: block; -} - -code { - background: #eef1f6; - padding: 15px 10px; - margin-bottom: 20px; - display: block; - line-height: 36px; - a { - color: #337ab7; - cursor: pointer; - &:hover { - color: rgb(32, 160, 255); - } - } -} - -.fade-enter-active, -.fade-leave-active { - transition: all .2s ease -} - -.fade-enter, -.fade-leave-active { - opacity: 0; -} - -//main-container全局样式 -.app-container { - padding: 20px; -} -.components-container { - margin: 30px 50px; - position: relative; -} -.pagination-container { - margin-top: 30px; -} - - -.editor-container .CodeMirror { - height: 100%!important; -} - -.wscn-icon { - width: 1em; - height: 1em; - vertical-align: -0.15em; - fill: currentColor; - overflow: hidden; -} - -.sub-navbar { - height: 50px; - line-height: 50px; - position: relative; - width: 100%; - text-align: right; - padding-right: 20px; - transition: 600ms ease position; - background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%); - .subtitle { - font-size: 20px; - color: #fff; - } - &.draft { - background: #d0d0d0; - } - &.deleted { - background: #d0d0d0; - } -} - -.link-type, -.link-type:focus { - color: #337ab7; - cursor: pointer; - &:hover { - color: rgb(32, 160, 255); - } -} - -.publishedTag, -.draftTag, -.deletedTag { - color: #fff; - background-color: $panGreen; - line-height: 1; - text-align: center; - margin: 0; - padding: 8px 12px; - font-size: 14px; - border-radius: 4px; - position: absolute; - left: 20px; - top: 10px; -} - -.draftTag { - background-color: $yellow; -} - -.deletedTag { - background-color: $red; -} - -.input-label { - font-size: 14px; - color: #48576a; - line-height: 1; - padding: 11px 5px 11px 0; -} - .clearfix { &:after { visibility: hidden; @@ -193,74 +41,31 @@ code { } } -.no-marginLeft { - .el-checkbox { - margin: 0 20px 15px 0; - } - .el-checkbox+.el-checkbox { - margin-left: 0px; - } +//vue router transition css +.fade-enter-active, +.fade-leave-active { + transition: all .2s ease } -.filter-container { - padding-bottom: 10px; - .filter-item { - display: inline-block; - vertical-align: middle; - margin-bottom: 10px; - } +.fade-enter, +.fade-leave-active { + opacity: 0; } - -//refine vue-multiselect plugin -.multiselect { - line-height: 16px; +//main-container全局样式 +.app-main{ + min-height: 100% } -.multiselect--active { - z-index: 1000 !important; +.app-container { + padding: 20px; } -//refine simplemde -.simplemde-container{ - .editor-toolbar.fullscreen,.CodeMirror-fullscreen{ - z-index: 1003; - } +.svg-icon { + width: 1em; + height: 1em; + vertical-align: -0.15em; + fill: currentColor; + overflow: hidden; } -//暂时性解决diolag 问题 https://github.com/ElemeFE/element/issues/2461 -.el-dialog { - transform: none; - left: 0; - position: relative; - margin: 0 auto; -} - -//github-corner -.github-corner:hover .octo-arm { - animation: octocat-wave 560ms ease-in-out -} - -@keyframes octocat-wave { - 0%, - 100% { - transform: rotate(0) - } - 20%, - 60% { - transform: rotate(-25deg) - } - 40%, - 80% { - transform: rotate(10deg) - } -} - -@media (max-width:500px) { - .github-corner:hover .octo-arm { - animation: none - } - .github-corner .octo-arm { - animation: octocat-wave 560ms ease-in-out - } -} diff --git a/src/styles/mixin.scss b/src/styles/mixin.scss index 822ab92..601d7a0 100644 --- a/src/styles/mixin.scss +++ b/src/styles/mixin.scss @@ -25,36 +25,3 @@ height: 100%; } -@mixin pct($pct) { - width: #{$pct}; - position: relative; - margin: 0 auto; -} - -@mixin triangle($width, $height, $color, $direction) { - $width: $width/2; - $color-border-style: $height solid $color; - $transparent-border-style: $width solid transparent; - height: 0; - width: 0; - @if $direction==up { - border-bottom: $color-border-style; - border-left: $transparent-border-style; - border-right: $transparent-border-style; - } - @else if $direction==right { - border-left: $color-border-style; - border-top: $transparent-border-style; - border-bottom: $transparent-border-style; - } - @else if $direction==down { - border-top: $color-border-style; - border-left: $transparent-border-style; - border-right: $transparent-border-style; - } - @else if $direction==left { - border-right: $color-border-style; - border-top: $transparent-border-style; - border-bottom: $transparent-border-style; - } -} diff --git a/src/utils/createUniqueString.js b/src/utils/createUniqueString.js deleted file mode 100644 index 2e6e357..0000000 --- a/src/utils/createUniqueString.js +++ /dev/null @@ -1,8 +0,0 @@ -/** - * Created by jiachenpan on 17/3/8. - */ -export default function createUniqueString() { - const timestamp = +new Date() + ''; - const randomNum = parseInt((1 + Math.random()) * 65536) + ''; - return (+(randomNum + timestamp)).toString(32); -} diff --git a/src/utils/index.js b/src/utils/index.js index a011f17..3f6b15f 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -57,92 +57,6 @@ } } -// 格式化时间 - export function getQueryObject(url) { - url = url == null ? window.location.href : url; - const search = url.substring(url.lastIndexOf('?') + 1); - const obj = {}; - const reg = /([^?&=]+)=([^?&=]*)/g; - search.replace(reg, (rs, $1, $2) => { - const name = decodeURIComponent($1); - let val = decodeURIComponent($2); - val = String(val); - obj[name] = val; - return rs; - }); - return obj; - } - - -/** - *get getByteLen - * @param {Sting} val input value - * @returns {number} output value - */ - export function getByteLen(val) { - let len = 0; - for (let i = 0; i < val.length; i++) { - if (val[i].match(/[^\x00-\xff]/ig) != null) { - len += 1; - } else { len += 0.5; } - } - return Math.floor(len); - } - - export function cleanArray(actual) { - const newArray = []; - for (let i = 0; i < actual.length; i++) { - if (actual[i]) { - newArray.push(actual[i]); - } - } - return newArray; - } - - export function param(json) { - if (!json) return ''; - return cleanArray(Object.keys(json).map(key => { - if (json[key] === undefined) return ''; - return encodeURIComponent(key) + '=' + - encodeURIComponent(json[key]); - })).join('&'); - } - - export function param2Obj(url) { - const search = url.split('?')[1]; - return JSON.parse('{"' + decodeURIComponent(search).replace(/"/g, '\\"').replace(/&/g, '","').replace(/=/g, '":"') + '"}') - } - - export function html2Text(val) { - const div = document.createElement('div'); - div.innerHTML = val; - return div.textContent || div.innerText; - } - - export function objectMerge(target, source) { - /* Merges two objects, - giving the last one precedence */ - - if (typeof target !== 'object') { - target = {}; - } - if (Array.isArray(source)) { - return source.slice(); - } - for (const property in source) { - if (source.hasOwnProperty(property)) { - const sourceProperty = source[property]; - if (typeof sourceProperty === 'object') { - target[property] = objectMerge(target[property], sourceProperty); - continue; - } - target[property] = sourceProperty; - } - } - return target; - } - - export function scrollTo(element, to, duration) { if (duration <= 0) return; const difference = to - element.scrollTop; @@ -154,61 +68,3 @@ scrollTo(element, to, duration - 10); }, 10); } - - export function toggleClass(element, className) { - if (!element || !className) { - return; - } - let classString = element.className; - const nameIndex = classString.indexOf(className); - if (nameIndex === -1) { - classString += '' + className; - } else { - classString = classString.substr(0, nameIndex) + classString.substr(nameIndex + className.length); - } - element.className = classString; - } - - export const pickerOptions = [ - { - text: '今天', - onClick(picker) { - const end = new Date(); - const start = new Date(new Date().toDateString()); - end.setTime(start.getTime()); - picker.$emit('pick', [start, end]); - } - }, { - text: '最近一周', - onClick(picker) { - const end = new Date(new Date().toDateString()); - const start = new Date(); - start.setTime(end.getTime() - 3600 * 1000 * 24 * 7); - picker.$emit('pick', [start, end]); - } - }, { - text: '最近一个月', - onClick(picker) { - const end = new Date(new Date().toDateString()); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); - picker.$emit('pick', [start, end]); - } - }, { - text: '最近三个月', - onClick(picker) { - const end = new Date(new Date().toDateString()); - const start = new Date(); - start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); - picker.$emit('pick', [start, end]); - } - }] - - export function getTime(type) { - if (type === 'start') { - return new Date().getTime() - 3600 * 1000 * 24 * 90 - } else { - return new Date(new Date().toDateString()) - } - } - diff --git a/src/utils/openWindow.js b/src/utils/openWindow.js deleted file mode 100644 index a7e2b91..0000000 --- a/src/utils/openWindow.js +++ /dev/null @@ -1,27 +0,0 @@ -/** - *Created by jiachenpan on 16/11/29. - * @param {Sting} url - * @param {Sting} title - * @param {Number} w - * @param {Number} h - */ - -export default function openWindow(url, title, w, h) { - // Fixes dual-screen position Most browsers Firefox - const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : screen.left; - const dualScreenTop = window.screenTop !== undefined ? window.screenTop : screen.top; - - const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width; - const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height; - - const left = ((width / 2) - (w / 2)) + dualScreenLeft; - const top = ((height / 2) - (h / 2)) + dualScreenTop; - 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); - - // Puts focus on the newWindow - if (window.focus) { - newWindow.focus(); - } -} - - diff --git a/src/utils/validate.js b/src/utils/validate.js index 3dbc5fe..6051c04 100644 --- a/src/utils/validate.js +++ b/src/utils/validate.js @@ -20,12 +20,6 @@ export function validateLowerCase(str) { return reg.test(str); } -/* 验证key*/ -// export function validateKey(str) { -// var reg = /^[a-z_\-:]+$/; -// return reg.test(str); -// } - /* 大写字母*/ export function validateUpperCase(str) { const reg = /^[A-Z]+$/; diff --git a/src/views/layout/AppMain.vue b/src/views/layout/AppMain.vue index d296a33..2dce938 100644 --- a/src/views/layout/AppMain.vue +++ b/src/views/layout/AppMain.vue @@ -1,5 +1,5 @@