refine

package.json

@@ -32,6 +32,7 @@
     "vue-count-to": "1.0.5",
     "vue-multiselect": "2.0.2",
     "vue-router": "2.7.0",
+    "vue-splitpane": "^1.0.0",
     "vuedraggable": "2.14.1",
     "vuex": "2.3.1",
     "xlsx": "^0.10.8"

src/api/login.js

@@ -19,7 +19,7 @@ export function logout() {
   })
 }
 
-export function getInfo(token) {
+export function getUserInfo(token) {
   return fetch({
     url: '/user/info',
     method: 'get',

src/mock/index.js

@@ -11,7 +11,7 @@ Mock.setup({
 // 登录相关
 Mock.mock(/\/login\/login/, 'post', loginAPI.loginByUsername)
 Mock.mock(/\/login\/logout/, 'post', loginAPI.logout)
-Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getInfo)
+Mock.mock(/\/user\/info\.*/, 'get', loginAPI.getUserInfo)
 
 // 文章相关
 Mock.mock(/\/article\/list/, 'get', articleAPI.getList)

src/mock/login.js

@@ -29,7 +29,7 @@ export default {
     const { username } = JSON.parse(config.body)
     return userMap[username]
   },
-  getInfo: config => {
+  getUserInfo: config => {
     const { token } = param2Obj(config.url)
     if (userMap[token]) {
       return userMap[token]

src/permission.js

@@ -20,7 +20,7 @@ router.beforeEach((to, from, next) => {
       next({ path: '/' })
     } else {
       if (store.getters.roles.length === 0) { // 判断当前用户是否已拉取完user_info信息
-        store.dispatch('GetInfo').then(res => { // 拉取user_info
+        store.dispatch('GetUserInfo').then(res => { // 拉取user_info
           const roles = res.data.role
           store.dispatch('GenerateRoutes', { roles }).then(() => { // 生成可访问的路由表
             router.addRoutes(store.getters.addRouters) // 动态添加可访问路由表

src/store/modules/app.js

@@ -5,8 +5,6 @@ const app = {
     sidebar: {
       opened: !+Cookies.get('sidebarStatus')
     },
-    theme: 'default',
-    livenewsChannels: Cookies.get('livenewsChannels') || '[]',
     visitedViews: []
   },
   mutations: {

src/store/modules/user.js

@@ -1,4 +1,4 @@
-import { loginByUsername, logout, getInfo } from 'api/login'
+import { loginByUsername, logout, getUserInfo } from 'api/login'
 import { getToken, setToken, removeToken } from 'utils/auth'
 
 const user = {
@@ -60,9 +60,9 @@ const user = {
     },
 
     // 获取用户信息
-    GetInfo({ commit, state }) {
+    GetUserInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo(state.token).then(response => {
+        getUserInfo(state.token).then(response => {
           const data = response.data
           commit('SET_ROLES', data.role)
           commit('SET_NAME', data.name)
@@ -117,7 +117,7 @@ const user = {
       return new Promise(resolve => {
         commit('SET_TOKEN', role)
         setToken(role)
-        getInfo(role).then(response => {
+        getUserInfo(role).then(response => {
           const data = response.data
           commit('SET_ROLES', data.role)
           commit('SET_NAME', data.name)

src/styles/btn.scss

@@ -5,29 +5,27 @@ $pink: #E65D6E;
 $green: #30B08F;
 $tiffany: #4AB7BD;
 $yellow:#FEC171;
-
 $panGreen: #30B08F;
 
 @mixin colorBtn($color) {
   background: $color;
   &:hover {
     color: $color;
-    &:before, &:after {
+    &:before,
+    &:after {
       background: $color;
     }
   }
 }
 
-
 .blue-btn {
   @include colorBtn($blue)
 }
 
-.light-blue-btn{
+.light-blue-btn {
   @include colorBtn($light-blue)
 }
 
-
 .red-btn {
   @include colorBtn($red)
 }
@@ -40,12 +38,10 @@ $panGreen: #30B08F;
   @include colorBtn($green)
 }
 
-
 .tiffany-btn {
   @include colorBtn($tiffany)
 }
 
-
 .yellow-btn {
   @include colorBtn($yellow)
 }
@@ -63,12 +59,14 @@ $panGreen: #30B08F;
   display: inline-block;
   &:hover {
     background: #fff;
-    &:before, &:after {
+    &:before,
+    &:after {
       width: 100%;
       transition: 600ms ease all;
     }
   }
-  &:before, &:after {
+  &:before,
+  &:after {
     content: '';
     position: absolute;
     top: 0;
@@ -85,7 +83,7 @@ $panGreen: #30B08F;
   }
 }
 
-.custom-button{
+.custom-button {
   display: inline-block;
   line-height: 1;
   white-space: nowrap;
@@ -101,3 +99,4 @@ $panGreen: #30B08F;
   font-size: 14px;
   border-radius: 4px;
 }
+

src/styles/index.scss

@@ -2,7 +2,6 @@
 @import './btn.scss';
 @import './element-ui.scss';
 @import './sidebar.scss';
-
 body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: antialiased;
@@ -98,15 +97,16 @@ code {
   opacity: 0;
 }
 
-
 //main-container全局样式
 .app-container {
   padding: 20px;
 }
+
 .components-container {
   margin: 30px 50px;
   position: relative;
 }
+
 .pagination-container {
   margin-top: 30px;
 }
@@ -115,9 +115,10 @@ code {
   height: 100%!important;
 }
 
-.text-center{
+.text-center {
   text-align: center
 }
+
 .svg-icon {
   width: 1em;
   height: 1em;
@@ -216,7 +217,6 @@ code {
   }
 }
 
-
 //refine vue-multiselect plugin
 .multiselect {
   line-height: 16px;
@@ -227,8 +227,9 @@ code {
 }
 
 //refine simplemde
-.simplemde-container{
+.simplemde-container {
-  .editor-toolbar.fullscreen,.CodeMirror-fullscreen{
+  .editor-toolbar.fullscreen,
+  .CodeMirror-fullscreen {
     z-index: 1003;
   }
 }

src/utils/fetch.js

@@ -1,7 +1,7 @@
 import axios from 'axios'
 import { Message } from 'element-ui'
-import store from '../store'
+import store from '@/store'
-import { getToken } from 'utils/auth'
+import { getToken } from '@/utils/auth'
 
 // 创建axios实例
 const service = axios.create({

src/utils/validate.js

@@ -2,7 +2,6 @@
  * Created by jiachenpan on 16/11/18.
  */
 
-/* 是否是公司邮箱*/
 export function isvalidUsername(str) {
   const valid_map = ['admin', 'editor']
   return valid_map.indexOf(str.trim()) >= 0
@@ -20,12 +19,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]+$/

src/views/components/avatarUpload.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="components-container">
-    <code>这里核心代码用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'>vue-image-crop-upload</a>
+    <code>这里核心代码用的是<a class='link-type' href='//github.com/dai-siki/vue-image-crop-upload'> vue-image-crop-upload</a>
     由于我在使用时它只有vue@1版本，而且有些业务的需求耦合到七牛等等原因吧，自己改造了一下，如果大家要使用的话，优先还是使用官方component
     </code>
 
@@ -14,8 +14,8 @@
 </template>
 
 <script>
-import ImageCropper from 'components/ImageCropper'
+import ImageCropper from '@/components/ImageCropper'
-import PanThumb from 'components/PanThumb'
+import PanThumb from '@/components/PanThumb'
 
 export default {
   components: { ImageCropper, PanThumb },

src/views/components/backToTop.vue

@@ -135,7 +135,7 @@
 </template>
 
 <script>
-import BackToTop from 'components/BackToTop'
+import BackToTop from '@/components/BackToTop'
 
 export default {
   components: { BackToTop },

src/views/components/dropzone.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="components-container">
-    <code>https://github.com/rowanwins/vue-dropzone
+    <code>
+      基于<a class='link-type' href='https://github.com/rowanwins/vue-dropzone'> dropzone </a>封装 ,
       由于我司业务有特殊需求，而且要传七牛 所以没用第三方 选择了自己封装
     </code>
     <div class="editor-container">
@@ -10,7 +11,7 @@
 </template>
 
 <script>
-import Dropzone from 'components/Dropzone'
+import Dropzone from '@/components/Dropzone'
 
 export default {
   components: { Dropzone },

src/views/components/mixin.vue

@@ -22,8 +22,8 @@
 </template>
 
 <script>
-import MdInput from 'components/MDinput'
+import MdInput from '@/components/MDinput'
-import PanThumb from 'components/PanThumb'
+import PanThumb from '@/components/PanThumb'
 import waves from '@/directive/waves.js'// 水波纹指令
 
 export default {

src/views/components/splitpane.vue

@@ -1,7 +1,7 @@
 <template>
 	<div class="components-container">
-		<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'>codepen</a>,<a href='https://jsfiddle.net/' target='_blank'>jsfiddle</a>就不会陌生了
+		<code>splitPane 如果你用过<a href='http://codepen.io/' target='_blank'> codepen</a>,<a href='https://jsfiddle.net/' target='_blank'> jsfiddle </a>就不会陌生了
-      暂还没有时间开源封装好，日后补上
+      <a href='https://github.com/PanJiaChen/vue-split-pane' target='_blank'>项目地址</a>
       </code>
 		<split-pane v-on:resize="resize" split="vertical">
 			<template slot="paneL">
@@ -23,7 +23,7 @@
 </template>
 
 <script>
-import splitPane from 'components/SplitPane'
+import splitPane from 'vue-splitpane'
 
 export default {
   components: { splitPane },

src/views/components/sticky.vue

@@ -94,7 +94,7 @@
 
 
 <script>
-import Sticky from 'components/Sticky'
+import Sticky from '@/components/Sticky'
 
 export default {
   components: { Sticky },